【问题标题】:Applying filters on outputted HTML for AngularJS对 AngularJS 的输出 HTML 应用过滤器
【发布时间】:2013-02-05 23:17:38
【问题描述】:

我在 AngularJS autolinknl2br 中创建了 2 个过滤器。

autolink: 将 URL 字符串转换为具有 rel="nofollow" target="_blank" 属性的 <a> 标记。我尝试将 ngSanitize 与 linky 过滤器一起使用,但它没有向其中添加上面的 2 个属性,也没有提供使用现有 API 的方法。

nl2br: 将新行转换为<br> 标签。

我想在我的 HTML 中使用 {{ comment | autolink | nl2br }} 将这两个过滤器应用到 {{ comment }},但过滤器是在 AngularJS 进行 HTML 转义之前应用的,这会导致 <a><br> 也被转义。基本上,我想转义发生后应用过滤器。

有没有办法用 AngularJS 做到这一点?

【问题讨论】:

    标签: filter escaping angularjs


    【解决方案1】:

    如果你的 HTML 中有标准插值,Angular 会转义它:

    <div> {{ var | filter1 | filter2 }} </div>
    

    整个表达式的结果将被转义。

    你想要的是ng-bind-html-unsafe(docs here)。您可以将与上面基本相同的内容表达为:

    <div ng-bind-html-unsafe='var | filter1 | filter2'></div>
    

    现在表达式的结果不会被过滤,并将作为 div 的内容插入。

    编辑:请注意,还有 ng-bind-html,它仍会生成 HTML,但会先对其进行清理 ($sanitize docs)。

    ng-bind-html 位于 ngSanitize 模块中,因此您必须确保已在 angular.module 调用中将其声明为依赖项。

    【讨论】:

    • 但在我的情况下,我希望评论被转义;转义后应用了 2 个过滤器。
    • 啊,那就用ng-bind-html代替ng-bing-html-unsafe吧。我已将其添加到答案中。
    • 我确实按照我的原始帖子中的说明这样做了。但我希望一切都逃脱然后应用我的过滤器。 ng-bind-html 将安全地转义一些 HTML,并单独留下一些基本的 html 标签。同样使用ng-bind-html,它将删除我使用autolink 过滤器定义的href 属性。
    • ng-bind-html 与使用花括号不同。请参阅jsfiddle.net/GqNxT - href 没有被剥离。
    • 好的,最后一次尝试,因为我认为你误解了我的意思。 (1) 在$scope.comment 中有一些数据。 (2)。注入$sanitize 并仅清理评论$scope.sanitizedComment = $sanitize(@scope.comment)。 (3) 在您的 HTML &lt;div ng-bind-html-unsafe='sanitizedComment | autolink | nl2br&gt;&lt;/div&gt; 中使用 sanitizedComment。这样,您只需清理评论,然后使用 ng-bind-html-unsafe 按原样不安全地应用过滤器。
    猜你喜欢
    • 2012-10-26
    • 2015-10-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-29
    • 1970-01-01
    相关资源
    最近更新 更多