51

我已经习惯了更流行的“小胡子”样式模板，我可以在其中为我的同事添加评论：

{# The following code looks a bit odd, but here's why... #}

这些评论显然不会出现在输出中——所以用户看不到它们。我怎样才能在 Angular 中做类似的事情？

4

3 回答 3

42

Angular 没有内置模板注释支持。但是，您可以创建一个注释指令来支持它，就像这样。

app.directive('templateComment', function () {
    return {
        restrict: 'E',
        compile: function (tElement, attrs) {
            tElement.remove();
        }
    };
});

标记将是：

<template-comment>Put your comment here.</template-comment>

或者，您可以使用标准的 html 注释，然后在部署之前将它们从生产代码中删除。

考虑这个 grunt 任务，如果您想支持块评论 - https://github.com/philipwalton/grunt-strip-code 指定开始评论和结束评论，您的评论块将被剥离生产代码，假设您将此任务添加到部署目标。如果您不使用 Grunt，请将其用作构建过程的模型。……

于 2013-08-05T17:07:30.637 回答
14

我意识到这个问题被问到已经超过 7 年了，但它是“角度模板评论”的热门搜索结果之一，所以我们开始......

由于似乎仍然没有对（非 html）注释的模板语法支持，我发现这样做的最简单方法是滥用对嵌入式表达式中单行 js 注释的支持。像这样：

{{ '' // my comment }}

空字符串文字 - 这使得它比现在更难看 - 是必要的，因为没有它，角度编译器会输出“TypeError 中的错误：无法读取未定义的属性 'visit'”，至少在 9.0.0 版本中我在。

是的，2021 年的 Web 开发！

于 2021-03-12T15:06:02.190 回答
6

您可以对没有特殊符号（如 ）的注释使用普通语法<!-- Order verification, and authorization -->，然后可以缩小 html (grunt + htmlmin)

htmlmin: {
      dist: {
        options: {
          collapseWhitespace: true,
          collapseBooleanAttributes: true,
          removeCommentsFromCDATA: true,
          removeOptionalTags: true,
          removeComments: true,
          ignoreCustomComments: [ /[<>\:\[\]\#]+/ ]

        },
        files: [{
          expand: true,
          cwd: '<%= yeoman.dist %>',
          src: ['*.html', 'views/**/*.html'],
          dest: '<%= yeoman.dist %>'
        }]
      }
    },
于 2016-08-16T09:21:53.623 回答