Page 41 - AngularJS权威教程

6.2 插值字符串 21

angular.module("myApp", []) 1
.controller('MyController',
function($scope,$parse) {
$scope.$watch('expr', function(newVal, oldVal, scope) {
if (newVal !== oldVal) { 2
// 用该表达式设置parseFun
var parseFun = $parse(newVal);
// 获取经过解析后表达式的值 3
$scope.parsedValue = parseFun(scope);
}
});
}); 4

在线示例：http://jsbin.com/UWuLALOf/1/edit?html,js,output。
5

6.2 插值字符串 6

在AngularJS中，我们的确有手动运行模板编译的能力。例如，插值允许基于作用域上的某 7
个条件实时更新文本字符串。

要在字符串模板中做插值操作，需要在你的对象中注入$interpolate服务。在下面的例子 8
中，我们将会将它注入到一个控制器中：
angular.module('myApp', []) 9
.controller('MyController',
function($scope, $interpolate) {
// 我们同时拥有访问$scope和$interpolate服务的权限
}); 10

$interpolate服务是一个可以接受三个参数的函数，其中第一个参数是必需的。
11
 text（字符串）：一个包含字符插值标记的字符串。
 mustHaveExpression （布尔型）：如果将这个参数设为true，当传入的字符串中不含有表
达式时会返回null。 12
 trustedContext（字符串）：AngularJS会对已经进行过字符插值操作的字符串通过
$sec.getTrusted()方法进行严格的上下文转义。 13

查看29.4节以获得关于最后一个参数的更多细节内容。 14

$interpolate服务返回一个函数，用来在特定的上下文中运算表达式。
15
设置好这些参数后，就可以在控制器中进行字符插值的操作了。例如，假设我们希望可以在
电子邮件的正文中进行实时编辑，当文本发生变化时进行字符插值操作并将结果展示出来。
16
<div ng-controller="MyController">
<input ng-model="to"
type="email" 17
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div> 18