Angular动态绑定HTML文本

AngularJS中输出变量使用{{}}花括号或者ng-bind命令，在进行数据绑定时默认是以文本的形式输出，如果变量中有HTML标签的话，默认是不转义的，直接以标签的形式显示，这样防止了XSS脚本注入攻击。XSS攻击指的是通过对网页注入可执行客户端代码且成功地被浏览器执行，来达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可能会获取到用户的一些敏感信息、改变用户的体验、诱导用户等非法行为。

AngularJS提供了ng-bind-html指令来动态绑定HTML文本，angular默认是不相信绑定的HTML文本的，对于绑定的HTML文本，必须利用$sce.trustAsHtml()方法告诉angular是可信的HTML文本，否则会报$sce:unsafe异常错误。

下面是一个绑定简单HTML文本的方法

1、引入angular-sanitize模块

var demo = angular.module('demoApp', [
    'ngSanitize'
  ])

2、控制器

demo.controller('DemoCtrl', ['$scope', 'DemoService', function ($scope, DemoService) {
	$scope.content = '<p>这是一段HTML文本</p>';
}

3、视图

<section ng-controller="DemoCtrl">
	<div ng-bind-html="content | htmlTrusted"></div>
</section>

4、过滤器htmlTrusted，$sce是angularJS自带的安全处理模块$sce，trustAsHtml方法便是将数据内容以html的形式进行解析并返回

demo.filter('htmlTrusted', function ($sce) {
    return function (html) {
      return $sce.trustAsHtml(html)
    }
  });

对于简单的HTML文本，就可以解决了。但是对于复杂的HTML片段，复杂是指HTML片段带有angular表达式或指令，ngBindHhtml将不会解析。ngBindHhtml不会和$scope关联双向绑定，如果在HTML中存在ngClick、ngHref、ngSHow、ngHide等angular指令，它们并不会被compile，点击这些按钮，也不会发生任何反应，绑定的表达式也不会在更新。

在angular中的所有指令要生效，都需要经过compile，大部分情况下compile，是会在angular启动时，自动compile的，但如果是对于动态添加的模板，则需要手动的compile，我们可以采用angular的$compile服务实现这一功能。

<div html-dynamic="content">

  demo.directive('htmlDynamic', function ($compile) {
    return {
      restrict: 'A',
      replace: true,
      link: function (scope, ele, attrs) {
        scope.$watch('isDomComplete', function (val) {
          if (val) {
            scope.$watch(attrs.htmlDynamic, function(html) {
              ele.html(html);
              $compile(ele.contents())(scope);
            });
          }
        });
      }
    };
  });

这里创建了一个html-dynamic指令，它会监听绑定属性html值的变化，当html内容存在的时候，利用$compile服务来动态给当前的作用域传入html，并替换掉当前DOM节点。这样HTML片段中的表达式或指令就生效了，希望本文为大家了解AngularJS有所帮助。