angular中的ng-bind-html和$sce服务

时间:2021-12-27 13:52:57

输入的内容存储在数据库中,然后再在数据库中将这些数据读写到页面上,比如你使用了某个第三方的脚本或者库、加载了一段html等等,可能会多了一些css的样式(显示在界面上)

这个时候我们可以利用angular的$sce,ng-bind-html来进行数据的安全绑定。

js:
controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) { $http.get('/api/work/get?workId=' + $routeParams.workId) .success(function (work) { $scope.currentWork = work; $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description); });
html:
<p ng-bind-html="currentWork.description"></p>

 当然也可以将其封装成一个过滤器:

   

app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
    return $sce.trustAsHtml(text);
};
<p ng-bind-html="currentWork.description | to_trusted"></p>  

 

参考链接:https://segmentfault.com/a/1190000000639561

                http://www.cnblogs.com/ys-ys/p/5001784.html

     http://www.cnblogs.com/xing901022/p/5100551.html