如何向Angular模板添加注释(对于开发人员，而不是在输出HTML中)

我习惯了更流行的"胡子"风格模板，在那里我可以用为我的同事添加评论

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

这些评论显然不会出现在输出中，所以用户看不到它们。我如何在Angular中做类似的事情？

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

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

然后标记为：

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

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

如果你想支持阻止评论，可以考虑这个繁重的任务https://github.com/philipwalton/grunt-strip-code指定一个开始注释和一个结束注释，假设您将此任务添加到部署目标，那么您的注释块将从生产代码中删除。如果您不使用Grunt，请将其用作构建过程的模型。。。。

我意识到这个问题已经被问了7年多了，但它是"角度模板注释"；所以我们开始。。。

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

{{ '' // my comment }}

空字符串文字-这使它比现在更难看-是必要的，因为如果没有它，角度编译器会弹出一个"类型错误：无法读取未定义的属性"visit"，至少在我使用的9.0.0版本中是这样。

2021年Yay网络开发！

您可以对没有等特殊符号的注释使用正常语法，然后可以缩小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 %>'
        }]
      }
    },

我最近也有同样的需求，并做到了：

<div ng-if="false">
  <!-- Your comment -->
</div>

它只产生以下输出：

<!-- ngIf: false -->

相关内容

最新更新

热门标签：