网站首页 » 前端开发 » JavaScript » AngularJS $sce 服务安全处理 HTML 数据
上一篇:
下一篇:

AngularJS $sce 服务安全处理 HTML 数据

在Angular 里,不用你自己去手动去处理 HTML 数据,因为AngularJS 有相关的服务供你使用。

看这里
<!DOCTYPE html>
<html lang="en" ng-app="yk">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $sce 服务:处理 HTML 数据</title>
    <script src="http://yunkus.com/demo/lib/js/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<div ng-bind-html="data"></div>
</div>
<script>
var m = angular.module("yk",[]);
m.controller("ctrl",["$scope","$sce",function($scope,$sce){
   $scope.htmlStr = '<h1 style="color:red">云库网</h1>';
   $scope.data = $sce.trustAsHtml($scope.htmlStr);
}]);
</script>
</body>
</html>

上面代码就是处理带有HTML 代码的数据,让它在渲染到页面中。现在我们把这个功能封闭成一个过滤器以便日后重复使用。代码如下:

看这里
<!DOCTYPE html>
<html lang="en" ng-app="yk">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $sce 服务封装成过滤器处理 HTML 数据</title>
    <script src="http://yunkus.com/demo/lib/js/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<div ng-bind-html="data | trustHtml"></div>
</div>
<script>
var m = angular.module("yk",[]);
m.controller("ctrl",["$scope","$sce",function($scope,$sce){
   $scope.data = '<h1 style="color:red">云库网</h1>';
}]);

m.filter("trustHtml",["$sce",function($sce){
    return function(data){
        return $sce.trustAsHtml(data);
    }
}]);
</script>
</body>
</html>

就这么简单,但用起来方便得难以置信。这里有一点要注意,如果想在页面中处理 HTML 数据的话,那么你必需得使用 ng-bind-html 来绑定带 HTML 的数据。页不能使用{}或者ng-bind。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/angularjs-sce-handle-html-data-safely/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END