Angular表达式--插值字符串($interpolate)

要在字符串模板中做插值操作，需要在你的对象中注入$interpolate服务。在下面的例子
中，我们将会将它注入到一个控制器中：

angular.module('myApp', [])
.controller('MyController',
function($scope, $interpolate) {
// 我们同时拥有访问$scope和$interpolate服务的权限
});

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

 

$interpolate服务返回一个函数，用来在特定的上下文中运算表达式。
设置好这些参数后，就可以在控制器中进行字符插值的操作了。例如，假设我们希望可以在
电子邮件的正文中进行实时编辑，当文本发生变化时进行字符插值操作并将结果展示出来。

<div ng-controller="MyController">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div>

由于控制器内部设置了一个需要每次变化都重新进行字符插值的自定义输入字段，因此需要
设置一个$watch来监听数据的变化。为了保证示例的完整性，在这
里我们为$watch引入完整的代码。
简而言之，$watch函数会监视$scope上的某个属性。只要属性发生变化就会调用
对应的函数。可以使用$watch函数在$scope上某个属性发生变化时直接运行一个自定
义函数。
在控制器中，我们设置了$watch来监视邮件正文的变化，并将emailBody属性的值进行字符
插值后的结果赋值给previewText属性。

angular.module('myApp', [])
.controller('MyController', function($scope, $interpolate) {
// 设置监听
$scope.$watch('emailBody', function(body) {
if (body) {
var template = $interpolate(body);
$scope.previewText =
template({to: $scope.to});
}
};
});

输出效果：