ng bind html 无效,ng-bind-html的用法总结

angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件)

AngularJS 依赖注入依赖注入(Dependency Injection，简称DI)是一种软件设计模式，在这种模式下，一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中，然后成为了该客户端状态的一部分。该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html().

但是,出于安全考虑,(xss跨站脚本攻击)如果我们直接使用ng-bind-html是会报错的,ng-bind-html后面的内容必须经过一定的处理.

跨站脚本攻击(Cross Site Script为了区别于CSS简称为XSS)指的是恶意攻击者往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行，从而达到恶意用户的特殊目的。

处理的方式有两种,一种是使用$sce服务,另一种就是使用$sanitize服务,$sanitize会根绝一个白名单来净化html标签.这样,不安全的内容就不会被返回. 白名单是根据$compileProvider的aHrefSanitizationWhitelist和imgSrcSanitizationWhitelist函数得到的.

var app =angular.module(‘myApp‘,[‘ngSanitize‘]);

app.controller(‘ctrl‘,function($scope,$sce){

$scope.myHtml= ‘

an html\n‘ +‘click here\n‘ +    ‘snippet‘;    $scope.trustHtml =$sce.trustAsHtml($scope.myHtml)

});

这样，在div内就能加载上带有html标签的内容，标签的属性以及绑定在元素上的事件都会被保留。