最近遇到后台返回的数据中带有各种各样的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绑定在元素上的事件。