详解AngularJs中$sce与$sceDelegate上下文转义服务(2)

(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() { this.htmlText = "<h2>Hello World</h2>"; } }());

上面是一个将不被Angular认定为信任的HTML代码字符串通过$sce设置为信任的HTML代码并且插入的例子,这里用了个小技巧,也就没在controller进行这步操作了,直接放到一个filter服务内,只要在需要的地方过滤下即可,并且可指定类型,这里写成统一动态选择类型了。那么在啥时候需要用到这两个服务呢?在当使用ng-bind-html绑定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”]); }]);

总结

以上就是这篇文章的全部内容,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjjzz.html