AngularJS-$sce的使用

最新推荐文章于 2021-07-02 08:51:34 发布

Mars-xq

最新推荐文章于 2021-07-02 08:51:34 发布

阅读量2.5k

点赞数

分类专栏： angularjs angularjs

本文链接：https://blog.csdn.net/sinat_31057219/article/details/61694256

版权

angularjs 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularjs

37 篇文章 0 订阅

订阅专栏

为什么要用sce？
因为AngularJS里好些地方，比如路径默认是个字符串，不会认为是路径，从而访问不到我们需要的东西，那么我们就可以通过sce告诉angualrJS这个路径，这样是安全的。它有以下几种：

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

$sce.trustAs(type,name);
$sce.trustAsUrl(value);
$sce.trustAsHtml(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

1.trustAsResourceUrl

<html>
<head>
    <meta charset="utf-8">
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    无$sce处理：
    <audio ng-src="{{formData.mediaUrl}}" controls="controls">您的浏览器不支持html5</audio>
    <br/>
    链接为：
    {{formData.mediaUrl}}
    <br/><br/>


    有$sce处理：

    第一种方式：$sce.trustAsResourceUrl;<br/>
    <audio ng-src="{{sceControl(formData.mediaUrl)}}" controls="controls">您的浏览器不支持html5</audio>
    <br/>
    链接为：
    {{sceControl(formData.mediaUrl)}}
    <br/><br/><br/>

    第二种方式：$sce.trustAsResourceUrl(url);<br/>
    <audio ng-src="{{data.url}}" controls="controls">您的浏览器不支持html5</audio>
    <br>
    链接为：
    {{data.url}}

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $sce) {
        //第一种方式数据源
        $scope.formData = {
            "name": "视频",
            "mediaUrl": "http://nongjibao.189.cn:8089/njb-mobile/fileuploadService/loadImgDataByFileName.do?fileName=c4707f62-51f4-4e95-a887-b491443d2e74_201703061150285028.mp3"//视频路径
        };
        $scope.sceControl = $sce.trustAsResourceUrl;//第一种处理方式

        //第二种方式数据源
        $scope.data = {
            "name": "视频",
            "url": "http://nongjibao.189.cn:8089/njb-mobile/fileuploadService/loadImgDataByFileName.do?fileName=c4707f62-51f4-4e95-a887-b491443d2e74_201703061150285028.mp3"//视频路径
        };
        $scope.data.url = $sce.trustAsResourceUrl($scope.data.url);//第二种处理方式

    });
</script>
</body>
</html>

Markdown

2.trustAsHtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    未处理的：
    <div ng-repeat="item in formData">
        {{item.name}} :{{item.htmlVal}}
    </div>

    <br/>处理过的：
    <button ng-click="look()">查看处理结果</button>
    <div ng-repeat="item in data">
        {{item.name}} :<p ng-bind-html="item.htmlVal"></p>
    </div>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $sce) {
        //未处理数据源
        $scope.formData = [
            {"name": "张春玲", "htmlVal": "我是<span style='color:red;'>张春玲<span>"},
            {"name": "sb", "htmlVal": "我是<span style='color:red;'>sb<span>"}
        ];

        //处理结果
        $scope.look = function () {
            alert
            $scope.data = [
                {"name": "张春玲", "htmlVal": "我是<span style='color:red;'>张春玲<span>"},
                {"name": "sb", "htmlVal": "我是<span style='color:red;'>sb<span>"}
            ];
            for (var i = 0; i < $scope.data.length; i++) {
                $scope.data[i].htmlVal = $sce.trustAsHtml($scope.data[i].htmlVal);
            }
        };

    });
</script>
</body>
</html>