博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular - - $sce 和 $sceDelegate
阅读量:6500 次
发布时间:2019-06-24

本文共 4616 字,大约阅读时间需要 15 分钟。

$sce

$sce 服务是AngularJs提供的一种严格上下文转义服务。

严格的上下文转义服务

严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式。由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子。我们称这些上下文转义为特权或者SCE。

下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码):

var ngBindHtmlDirective = ['$sce', function($sce) {      return function(scope, element, attr) { scope.$watch($sce.parseAsHtml(attr.ngBindHtml), function(value) { element.html(value || ''); }); }; }];

支持哪些信任的上下文类型?

$sce.HTML  将HTML代码安全的绑定到应用程序中。

$sce.CSS  将CSS样式代码安全的绑定到应用程序中。

$sce.URL  将URL安全的绑定到应用程序中并保证其可用。比如(href,src)

$sce.RESOURCE_URL   将RESOURCE_URL安全的绑定到应用程序中并保证其可用。比如(ng-href,ng-src)

$sce.JS  将JAVASCRIPT代码安全的绑定到应用程序中。

如何使$sce服务可用或者不可用?

angular.module(“myApp”,[]).config([“$sceProvider”,function($sceProvider){       $sceProvider.enabled(true/false);  }]);

使用:$sce();

方法

isEnabled();

返回一个boolean,指示是否可启用SCE。

parseAs(type,expression);

将Angular表达式转换为一个函数。这类似$parse解析并且当表达式是常量时是相同的。否则,它将调用$sce.getTrusted(type,result)将表达式包装。

type:在SCE的上下文的使用的结果的类型。

expression:被编译的字符串表达式。

trustAs(type,value);

代表$sceDelegate.trustAs。

type:上下文中能安全的被使用的值,如url,resourceUrl,html,js和css。

value:需要被认为是安全或者值的信赖的值。

trustAsHtml(value);

$sceDelegate.trustAs($sce.HTML,value)的快捷方式。

value:被信任的值。

trustAsUrl(value);

$sceDelegate.trustAs($sce.URL,value)的快捷方式。

value:被信任的值。

trustAsResourceUrl(value);

$sceDelegate.trustAs($sce.RESOURCE_URL,value)的快捷方式。

value:被信任的值。

trustAsJs(value);

$sceDelegate.trustAs($sce.JS,value)的快捷方式。

value:被信任的值。

getTrusted(type,maybeTrusted);

代表$sceDelegate.getTrusted。因此,得到了$sce的结果。如果查询的上下文类型是一个创造型的类型,则调用trustAs()并且返回原来提供的值。如果这个条件不满足,则抛出一个异常。

getTrustedHtml(value);

$sceDelegate.getTrusted ($sce.HTML,value)的快捷方式。

value:通过$sce.getTrusted执行后的值。

getTrustedCss(value);

$sceDelegate.getTrusted ($sce.CSS,value)的快捷方式。

value:通过$sce.getTrusted执行后的值。

getTrustedUrl(value);

$sceDelegate.getTrusted ($sce.URL,value)的快捷方式。

value:通过$sce.getTrusted执行后的值。

getTrustedResourceUrl(value);

$sceDelegate.getTrusted ($sce.RESOURCE_URL,value)的快捷方式。

value:通过$sce.getTrusted执行后的值。

getTrustedJs(value);

$sceDelegate.getTrusted ($sce.JS,value)的快捷方式。

value:通过$sce.getTrusted执行后的值。

parseAsHtml(expression);

$sce.parseAs ($sce.HTML,value)的快捷方式。

value:被编译的字符串表达式。

parseAsCss(expression);

$sce.parseAs ($sce.CSS,value)的快捷方式。

value:被编译的字符串表达式。

parseAsUrl(expression);

$sce.parseAs ($sce.URL,value)的快捷方式。

value:被编译的字符串表达式。

parseAsResourceUrl(expression);

$sce.parseAs ($sce.RESOURCE_URL,value)的快捷方式。

value:被编译的字符串表达式。

parseAsJs(expression);

$sce.parseAs ($sce.JS,value)的快捷方式。

value:被编译的字符串表达式。

使用方式:

 
(function () {      angular.module('Demo', [])      .controller('testCtrl', ["$sce","$scope",testCtrl]);      function testCtrl($sce,$scope) { var vm = this; $scope.$watch("ctrl.jsContext",function(n){ vm.jsBody = n; }); vm.runJs = function() { eval(vm.jsBody.toString()); }; vm.htmlText = "

Hello World

"; vm.htmlText =$sce.trustAsHtml(vm.htmlText); } }());

放在filter使用:

(function () {      angular.module('Demo', [])      .filter("trust",["$sce",trust])      .controller('testCtrl', testCtrl);      function trust($sce){ return function(value,type){ return $sce.trustAs(type,value); } }; function testCtrl() { var vm = this; vm.htmlText = "

Hello World

"; } }());

上面是一个将不被Angular认定为信任的HTML代码字符串通过$sce设置为信任的HTML代码并且插入的例子,这里用了个小技巧,也就没在 controller进行这步操作了,直接放到一个filter服务内,只要在需要的地方过滤下即可,并且可指定类型,这里写成统一动态选择类型了。那么 在啥时候需要用到这两个服务呢,答案是在当你绑定ng-bind-html时报错:Error: [$sce:unsafe]Attempting to use an unsafe value in a safe context. 的时候。哈哈~~~

 

$sceDelegate

$sceDelegate是一个AngularJs为$sce服务提供严格的上下文转义服务的服务。

通常,你会配置或者重写$sceDelegate去代替$sce服务以定制AngularJs中的严格的上下文转义机制。当$sce提供众多的快捷 方式,你其实只需要重写三个核心功能(trustAs,getTrusted和valueOf)来替代事件的工作方式,因为$sce代表 了$sceDelegate的这些操作。

当你完成了重写或配置$sceDelegate用来改变$sce的行为时,一般情况下,需要配置$sceDelegateProvider以代替你用于装载可信任的AngularJs资源(如template)的白名单和黑名单。

使用:$sceDelegate();

方法

trustAs(type,value);

返回一个在angular中作为指定的使用严格的上下文转义服务上下文中的值的对象使用。

type:上下文中能安全的被使用的值,如url,resourceUrl,html,js和css。

value:需要被认为是安全或者值的信赖的值。

valueOf(value);

如果传递的参数被上一个$sceDelegate.trustAs调用返回,返回已通过$sceDelegate.trustAs的值。否则返回原先的值。

value:上一个$sceDelegate.trustAs调用的结果或者其他任何结果。

getTrusted(type,maybeTrusted);

如果查询的上下文类型是一个创造型的类型,得到$sceDelegate调用的结果并返回最初提供的值。如果这个条件不满意,抛出一个异常。

type:需要用到的值的类型。

value:上一个$sceDelegate.trustAs调用的结果或者其他任何结果。

使用代码(配置白名单/黑名单):

angular.module('myApp', []).config([“$ sceDelegateProvider”,function($sceDelegateProvider) {    $sceDelegateProvider.resourceUrlWhitelist([“whitelist value”]);    $sceDelegateProvider.resourceUrlBlacklist([“blacklist value”]);  }]);

写完睡觉  -。-  这篇准备了两天,在google找了些较详细的资料参考了下,然后写出大致的中文,再写demo,不过感觉这个相关的文章多是多,写的却都复制个源码, 注释2-3句就差不多,还不如实用些的来个demo,所以直接扔上来两串测过后运行成功的代码...

转载地址:http://tcvyo.baihongyu.com/

你可能感兴趣的文章
[詹兴致矩阵论习题参考解答]习题1.3
查看>>
Android Fragment的使用
查看>>
沙朗javascript总结一下(一)---基础知识
查看>>
js深入研究之函数内的函数
查看>>
LeetCode:4_Median of Two Sorted Arrays | 求两个排序数组的中位数 | Hard
查看>>
python之commands模块
查看>>
android应用开发--------------看RadioGroup源代码,写相似单选选项卡的集成控件(如底部导航,tab等等)...
查看>>
LeetCode - Binary Tree Level Order Traversal
查看>>
FTP协议完全详解
查看>>
【C语言天天练(十五)】字符串输入函数fgets、gets和scanf
查看>>
【环境配置】配置sdk
查看>>
accept()
查看>>
USB 2.0 Hub IP Core
查看>>
USB 2.0 OTG IP Core
查看>>
解读浮动闭合最佳方案:clearfix
查看>>
Charles使用
查看>>
Python GUI编程(Tkinter) windows界面开发
查看>>
dynamic关键字的使用
查看>>
iOS 音乐播放器之锁屏效果+歌词解析
查看>>
android O 蓝牙设备默认名称更改
查看>>