Page 406 - AngularJS权威教程

386 第 29 章 安全性

启用这一特性时，所有内置指令都会自动调用$sce。当然，在自己的指令或者其他自定义组
件中，也可以使用这一行为。
要设置$sce保护，需要注入$sce服务。

angular.module('myApp', [])
.directive('myDirective', ['$sce', function($sce) {
// 这里有权使用$sce服务
}])
.controller('MyController', ['$scope', '$sce', function($scope, $sce) {
// 这里也有权使用$sce服务
}]);
在上面的指令和控制器内，我们希望Angular能够允许受信任的内容回到视图内，同时接受
可信任的插值输入。
$sce服务有一个简单的API，让我们能够设置和获取明确特定类型的可信任内容。

例如，要构建一个邮件预览程序。这个邮件客户端会允许用户在他们的邮件中编写HTML；
而我们希望给他们的文本提供一个实时预览。

其中用到的HTML看起来可能像这样：

<div ng-app="myApp">
<div ng-controller="MyController">
<textarea ng-model="email.rawHtml"></textarea>
<pre ng-bind-html="email.htmlBody"></pre>
现在，注意这里 email 上不同的属性： email.rawHtml 和 email.htmlBody 会获取到
<textarea></textarea>中的大段文本。在控制器内部，会将email.rawHtml解析为HTML，然
后再输出到浏览器中。
在控制器内，可以设置一个$watch监控email.rawHtml的变化，然后无论什么时候发生变化
都在HTML内容上运行一个受信任的解析器。

.controller('MyController', ['$scope', '$sce', function($scope, $sce) {
// 在email.rawHtml上设置监控
$scope.$watch('email.rawHtml', function(v) {
// 假设在非编译($compile)阶段
if(v) {
// 将htmlBody渲染为受信任的HTML
$scope.email.html Body = $sce.trustAsHtml($scope.email.rawHtml);
}
});
}]);
现在，每当email.rawHtml的内容发生变化时，都会在这个内容上执行一个解析器，然后取
回适当的HTML内容。而这个内容会被渲染为干净的HTML，也就是应用程序的安全来源。
假如还希望页面上能执行用户编写的自定义JavaScript会怎样呢？例如，希望允许用户编写含
自定义JavaScript的电子贺卡，那么就要允许他们在页面让运行自定义的JavaScript代码。

要用到的HTML看起来可能像这样：
<textarea ng-model="email.rawJs"></textarea>
<pre ng-bind="email.jsBody"></pre>
<button ng-click="runJs()">Run</button>