Angular 指令 ng-bind-html 在某些情况下不起作用

Question

I think I tried all the solutions presented on stack overflow but couldn't find an answer.

I am using angular 1.4.4 and ng-repeat directive and I want to display a HTML comment inside a table row. A sample comment is ' '

<tbody ng-show="dataLoaded">
    <tr ng-repeat="comment in comments | filter: commentFilter | commentFilter: customCommentFilter | limitTo: 10 : (currentPage*10-10)">
        <td ng-bind-html="comment.Comment | html">
        </td>
    </tr>
</tbody>

Then, inside my filter file I am using the following filter:

// html filter (render text as html)
angular.module('app').filter('html', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
};

Also, it is working when I write something like

<td ng-bind-html="'<b>abc</b>' | html">

Finally, when I write something like

<td>
    {{comment.Comment}}
</td>

The comment is displayed as <b>Test comment</b>

Also, I have added ngSanitize:

(function () {
    'use strict';

    var app = angular.module('app', [
        // Angular modules 
        'ngCookies',
        'ngRoute',
        'ngAnimate',                    
        'ngSanitize',                    
    ]);
    ...
    ...
})();

My question is, how can I make ng-bind-html work in my example?

Answer 1

<tbody ng-show="dataLoaded">
    <tr ng-repeat="comment in comments | filter: commentFilter | commentFilter: customCommentFilter | limitTo: 10 : (currentPage*10-10)">
        <td ng-bind="comment.Comment">
        </td>
    </tr>
</tbody>