How can I insert an HTML comment with an interpolated expression?

Question

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>

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?

Answer 1

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

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 + "-->" );
    }
  };
});

And the usage is:

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