标签：
野兽的ng api学习 -- $sce 和 $sceDelegate
$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：被编译的字符串表达式。
常规使用方式：
<div ng-app="Demo">
<div ng-controller="demoCtrl">
<textarea ng-model="jsContext"></textarea>
<pre ng-bind="jsBody"></pre>
<button ng-click="runJs()">Run</button>
<div ng-bind-html="htmlText" class="myCss"></div>
</div>
</div>
<script>
angular.module(‘Demo‘, [])
.controller("demoCtrl", ["$scope","$sce",function ($scope,$sce) {
$scope.$watch("jsContext",function(n){
$scope.jsBody = n;
});
$scope.runJs = function() {
eval($scope.jsBody.toString());
};
$scope.htmlText = "<h2>Hello World</h2>";
$scope.htmlText =$sce.trustAsHtml($scope.htmlText);
}])
</script>
放在filter使用：
<div ng-app="Demo">
<div ng-controller="demoCtrl">
<div ng-bind-html="htmlText | trust:‘html‘"></div>
</div>
</div>
<script>
angular.module(‘Demo‘, [])
.filter("trust",["$sce",function($sce){
return function(value,type){
console.log(value,type)
return $sce.trustAs(type,value);
}
}])
.controller("demoCtrl", ["$scope",function ($scope) {
$scope.htmlText = "<h2>Hello World</h2>";
}])
</script>
上面是一个将不被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提供众多的快捷方式，你其实只需要重写3个核心功能（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，所以直接扔上来两串测过后运行成功的代码....
野兽的Angular Api 学习、翻译及理解 - - $sce 和 $sceDelegate
标签：
原文地址：http://www.cnblogs.com/ys-ys/p/5001784.html
