深究AngularJS中$sce的使用


Posted in Javascript onJune 12, 2017

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

$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://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
  第一种方式:<br/>
  有$sce处理:<audio ng-src="{{sceControl(formData.mediaUrl)}}" controls="controls">您的浏览器不支持html5</audio><br/>
  无$sce处理:<audio ng-src="{{formData.mediaUrl}}" controls="controls">您的浏览器不支持html5</audio><br/><br/>

  第二种方式:<br/>
  <audio ng-src="{{data.url}}" controls="controls">您的浏览器不支持html5</audio>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope,$sce){
    //第一种方式数据源
    $scope.formData={
      "name":"视频",
      "mediaUrl":"http://res.audiogroup.cn/res/upload/agx_ims_creative/audio/20160307/bpryk96.mp3"//视频路径
    };   
    $scope.sceControl = $sce.trustAsResourceUrl;//第一种处理方式

    //第二种方式数据源
    $scope.data={
      "name":"视频",
      "url":"http://res.audiogroup.cn/res/upload/agx_ims_creative/audio/20160307/bpryk96.mp3"//视频路径
    }; 
    $scope.data.url = $sce.trustAsResourceUrl($scope.data.url);//第二种处理方式

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

2.trustAsHtml

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
JS身份证信息验证正则表达式
Jun 12 #Javascript
用原生JS实现简单的多选框功能
Jun 12 #Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 #Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 #Javascript
AngularJS 异步解决实现方法
Jun 12 #Javascript
jquery+css实现侧边导航栏效果
Jun 12 #jQuery
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 #Javascript
You might like
php查看session内容的函数
2008/08/27 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JS解析XML的实现代码
2009/11/12 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
javascript event 事件解析
2011/01/31 Javascript
js倒计时小程序
2013/11/05 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
企业出纳岗位职责
2014/03/12 职场文书
红色故事演讲稿
2014/05/22 职场文书
个人年底工作总结
2015/03/10 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android