【问题标题】:Angular directive ng-bind-html is not working in some casesAngular 指令 ng-bind-html 在某些情况下不起作用
【发布时间】:2016-04-18 11:58:20
【问题描述】:

我想我尝试了所有关于堆栈溢出的解决方案,但找不到答案。

我正在使用 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>

评论显示为测试评论

另外,我添加了 ngSanitize:

(function () {
    'use strict';

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

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

【问题讨论】:

  • 我用表格构建了一个 JSFiddle,没有您的自定义过滤器它可以正常工作。你确定你已经在你的应用模块中包含了 ngSanitize 吗? jsfiddle.net/3t4yyh7p/25
  • 是的。添加了 NgSanitize。我编辑了我的问题

标签: javascript html angularjs ng-bind-html


【解决方案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>

【讨论】:

    猜你喜欢
    • 2014-07-05
    • 2013-01-21
    • 1970-01-01
    • 2021-09-17
    • 2018-11-28
    • 2011-09-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多