AngularJS中如何绑定html内容

问题

AngularJS中，通过ng-model为DOM绑定的值默认显示为文本，即使绑定的值中含有HTML标签，也会被解析成安全字符串显示为常量。
但是，如果我们就是希望此DOM以HTML方式显示绑定的内容，该怎么办呢？

解决方案

我推荐使用ng-bind-html命令 + 筛选器的方式，这样使代码比较清楚明了。
请看下述例子：

<div class="msg-item-detail" ng-bind-html="messageItem.content|to_html">

上述代码中，为此DIV绑定了messageItem.content的值，并且使用了筛选器”to_html”，

看看“to_html”是如何实现的吧：

define(function (require, exports,module ) {
    module.exports = function(app){
        app.register.filter('to_html', ['$sce',
            function ($sce) {
                return function (text) {
                    return $sce.trustAsHtml(text);
                };
            }
        ]);
    }
});

此时，你还需要搞懂传入的text变量是否从其它地方来，是否来源于其它的输入框，假如真如此的话，

那一旦用户在输入框输入了script标签并且alert了一些东西，

那么，在这里，这些js就会被执行。

所以使用ng-bind-html方法来绑定数据时需要谨慎，必要的时候可先对text进行htmlEncode

  function textEncode(str) {
                    str = str.replace(/&/gi, '&');
                    str = str.replace(/</g, '&lt;');
                    str = str.replace(/>/g, '&gt;');...
                    return str;
  }

我通常使用的方法是利用jquery将特殊字符过滤。如果 str = ‘你好<script>alert(1)</script>’

我只需要执行 str = $('<div>').text(str).html(); 就可以解决此问题了，此时可以将str作为参数传入$sce.trustAsHtml(str)中了。

---

effevo技术团队出品 （https://effevo.com）