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});
}
};
});

輸出效果：