用ng-bind-html指令和 $sce服务 实现页面输出html

一.  我们要实现如下需求: 

hello,
今天我们去哪里？
怎么办呢？

后台返回的数据中带有各种各样的html标签。如：

$scope.currentWork.description = “hello,<br><b>今天我们去哪里？</b>”

二. 解决步骤

1 页面用ng-bind-html指令来绑定变量

2 使用 $sce服务。

所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。

我们返回的内容中包含一系列的html标记。这时候我们必须告诉它安全绑定。它可以通过使用$ sce.trustAsHtml()。

该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以，我们必须在我们的控制器中引入$sce服务

controller('controllerName', ['$scope','$sce'], function ($scope, $sce) {
    $scope.currentWork.description = $sce.trustAsHtml(#######这里写需要的代码);
});

页面代码:

<p ng-bind-html="currentWork.description"></p>

为了更好的使用, 我们把它封装成过滤器, 就可以在页面随时用了

angular.module("moduleName").filter('to_trusted', ['$sce', function($sce){

return function(text){

return $sce.trustAsHtml(text);

};

}]);

页面代码:

<p ng-bind-html="currentWork.description | to_trusted"></p>