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

时间:2016-04-18 11:58:21

标签: javascript html angularjs ng-bind-html

我认为我尝试了堆栈溢出时提供的所有解决方案,但无法找到答案。

我正在使用angular 1.4.4和ng-repeat指令,我想在表格行中显示HTML注释。示例评论为' 测试评论'

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

然后,在我的过滤器文件中,我使用以下过滤器:

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

此外,当我写

之类的东西时,它正在工作
<td ng-bind-html="'<b>abc</b>' | html">

最后,当我写一些像

这样的东西
<td>
    {{comment.Comment}}
</td>

评论显示为&lt; b&gt;测试评论&lt; / b&gt;

另外,我添加了ngSanitize:

(function () {
    'use strict';

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

我的问题是,如何在我的示例中使ng-bind-html工作?

1 个答案:

答案 0 :(得分:-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>