angularJS 显示带html的文本

1.首先定义一个angularJS的过滤器，作为处理html文本的通用过滤器。 define([ "app",], function (app) { app().registerFilter("

1.首先定义一个angularJS的过滤器，作为处理html文本的通用过滤器。

define([ "app",], function (app) {    app().registerFilter("trusted", ["$sce", function ($sce) {        return function (html) {            if (typeof html== 'string')   //判断类型为字符串                return $sce.trustAsHtml(html);              return html;        }    }])});

注：

    sce 即 strict contextual escaping，严格模式下的上下文隔离，也可以理解为安全绑定，类似于浏览器的同源加载策略，不能加载不同域下的文件及不鞥呢使用不和要求的协议，angularJS为了避免安全漏洞，有些ng-src或ng-include都会进行安全检查，避免了一些跨站的XSS。angularJS是默认开启sce的，所以html文本得使用授权信任加载的html文本。

    $sce是angularJS自带的安全处理模块，$sce.trustAsHtml()方法将值转换为特权所接受并能安全地使用“ng-bind-html”，就实现在数据加载时对于html标签的自动转义。

2.使用ng-bind-html将html文本绑定到页面上，同时调用过滤器。

<a mam-href="~/entity/#/browse/{{data.contentId_}}" target="_blank" ng-bind-html="data.keyWord | trusted"></a>

注：

angularJS在进行数据绑定时默认是会以文本的形式输出，也就是数据中的html标签不进行转义照单全收，这样提高了安全性，防止了html标签中的注入攻击，但有些时候还是需要的，特别是从数据库读取带格式的文本时，无法正常的显示在页面中。而要对html进行转义，则要在数据绑定的html标签中使用ng-bind-html属性，该属性依赖与$sanitize，也就是需要引入angular-sanitize.js文件，并在module定义时注入该服务ngSanitize。

 

转载时请注明：来自w-rain的个人博客