How to insert HTML comment using interpolated expression?

Question

I would like to add an HTML comment with an interpolated expression in the ng-repeat block. However, when I try to do this, the expression does not interpolate. For instance:

<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>

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

What is the correct syntax here?

Answer 1

This is a way to overflow, as you can just use sentences in comments display: noneor the like, but just as a fun exercise:

The syntax for invoking the comment directive is:

<!-- directive: foo expression -->

, - ng-bind , . :

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}}" -->