ng-bind-html的用法总结
2017-09-27 本文已影响0人
lovelydong
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函数得到的.
<title></title> <meta charset="utf-8">
<script src="../angular-1.3.2.js">
</script> <script src="angular-sanitize.min.js">
</script> <script src="script.js"></script>
<link type="text/css" href="../bootstrap.css" rel="stylesheet" />
<div class="container" ng-controller="ctrl">
<div ng-bind-html="trustHtml">
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标签的内容，标签的属性以及绑定在元素上的事件都会被保留。
