使用ng-bind-html指令和$sce服务

最近遇到后台返回的数据中带有各种各样的html标签,需要把返回的html内容插入到页面。在angular中，如果我们想要把它插入到页面中可以使ng-bind-html这个指令来实现。但是如果只是仅仅使用这个指令并不能达到我们所要的效果。angular中直接嵌入一段html代码会认为是不安全的，所以此时angular会给我们报错。
对于angular 1.2之后的版本我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。我们必须告诉它安全绑定。它可以通过使用$ sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以，我们必须在我们的控制器中注入$sce服务。

html
<div ng-bind-html="test"></div>

script
var app=angular.module('app',[]);
app.controller('testCtrl',['$scope','$sce',function($scope){
    $scope.testHtml=<p class="color" ng-click="test()">hello world</p>;
    $scope.test=$sce.trustAsHtml($scope.Html);
}])
$scope.test=function(){
    alert(1);
}

css
.color{
     background-color:blue;
}

在div内能加载带有html标签的内容，标签的Css属性以及使用ng-click绑定在元素上的事件。