如何插入带有内插表达式的 HTML 注释? [英] How can I insert an HTML comment with an interpolated expression?

问题描述

我想在 ng-repeat 块中添加带有内插表达式的 HTML 注释.但是，当我尝试执行此操作时，不会插入表达式.例如:

I'd like to add an HTML comment with an interpolated expression within an ng-repeat block. However, when I try to do this, the expression is not interpolated. For example:

<tr ng-repeat="item in items"
    <!-- ID that I don't want the user to see, but want for debugging = {{item.id}} -->
    <td>{{item.prettyName}}</td>
    <td>{{item.someProperty}}</td>
    <td>{{item.someOtherProperty}}</td>
</tr>

当我查看 DOM(即 Chrom DevTools 中的 Elements 选项卡)时，我只看到未插入的字符串 ("{{item.id}}") 而不是插入的值.

When I view the DOM (i.e. the Elements tab in Chrom DevTools), I just see the uninterpolated string ("{{item.id}}") instead of the interpolated value.

这里的正确语法是什么?

What's the correct syntax here?

推荐答案

这太过分了，因为你可以只使用 display: none 或类似评论中的建议，但就像有趣的练习:

This is way overkill, since you could just use the suggestions in the comments of display: none or similar, but just as a fun exercise:

在注释上调用指令的语法是:

The syntax to invoke a directive on a comment is:

<!-- directive: foo expression -->

我希望像 ng-bind 这样的东西支持注释，但它没有.但您可以轻松创建自己的:

I was hoping that something like ng-bind supported comments, but it doesn't. But you could easily create your own:

app.directive('comment', function($interpolate) {
  return {
    restrict: 'M',
    scope: true,
    link: function(scope, element, attrs) {
      var comment = $interpolate(attrs.comment)(scope);
      element.replaceWith("<!-- " + comment + "-->" );
    }
  };
});

用法是:

<!-- directive: comment "something something {{item.id}}" -->

这篇关于如何插入带有内插表达式的 HTML 注释?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！