淺談AngularJS的$interpolate服務 1

官方關於$interpolate的API

$interpolate

• 編譯一段帶有嵌入標記的語句，而後返回一個interpolation（插值）函數，
  這個服務也被HTML$compile服務用來進行數據綁定。能夠用$interpolateProvider來配置嵌入的標記。

• 依賴

  • $parse

  • $sce

• 使用

  • $interpolate(text, [mustHaveExpression], [trustedContext], [allOrNothing])

  • 參數

    • text[string] 須要被編譯的字符串

    • mustHaveExpression[boolean] 若是這個參數的值被設置爲true,那麼上面的text中必須含有嵌入其中的表達式，否則將會返回null,而不是咱們預期的interpolation function

    • trustedContext[string] 若是提供了這個參數值，那麼在返回相應的函數以前，將會使用$sce.getTrusted(interpolatedResult, trustedContext)對返回的結果作處理。

    • allOrNothing[boolean] 若是這個參數的值被設置爲true，那麼只有text中全部嵌入的表達式沒有一個被轉換爲undefined的時候纔會返回咱們指望的函數。

• 返回值

  • function(context) 一個用來計算帶有插值標記語句的函數，這個函數有一個參數

    • context 爲嵌入標記語句中的表達式提供的上下文。

• Escaped Interpolation（擺脫插值服務）

  • $interpolate提供了一種用來擺脫插值標記的機制，那就是經過在嵌入標記的開始和結束符號前面加上反斜槓\，AngularJS將會把這部分渲染爲普通的部分，因此也不會被解讀爲爲表達式或者數據綁定。

  • 這讓Web服務器阻止腳本注入和抵禦網絡攻擊成爲可能，從某種程度上說，無需依靠ngNonBindable指令就能夠展現代碼例子是如何運行的。

  • 爲了安全目的，咱們強烈建議Web服務器對用戶的應用數據進行檢索和過濾，用&lt和&gt替代(<,>)，而且使用相應的字符去替代嵌入標記的開始和結束符。

---

若是你以爲筆者翻譯的不是很好，能夠到官網看看他們的英文文檔

---

下面咱們來探究一下$interpolate的使用方法

注：代碼是在jsfiddle上面寫的，因此你們實踐的時候要注意引入相應的文件
T1:在這個例子中咱們先來簡單地使用一下$interpolate
(html)

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <input ng-model="myName" type="text" placeholder="Type Your Name">
        <textarea ng-model="myTextarea" cols="30" rows="10"></textarea>
        <div ng-bind="interpolatedValue"></div>
    </div>
</div>

(js)

angular.module("MyApp", [])
.controller("MyController", function($scope, $interpolate){
    $scope.$watch("myTextarea", function(newVal, oldVal, scope){
        var interpolatedFunc = $interpolate(newVal);
        //(1)
        $scope.interpolatedValue = interpolatedFunc({myName: $scope.myName}); 
        //(2)
        //$scope.interpolatedValue = interpolatedFunc(scope);        
    });
    
});

關於上面代碼的解釋：

• 由於要實時監測myTextarea的變化，因此咱們要使用$watch方法去對其進行實時監測。

• 代碼(1)與代碼(2)的做用是同樣的，括號中的參數是插值標記字符串中表達式轉義（解析）的上下文。

• 咱們在textarea中輸入{{myName}}會在下面的div中顯示input輸入框的內容。

T1:jsfiddle代碼在這裏

T2:在下面這個例子中咱們嘗試去使用$interpolateProvider
只需修改上面的js代碼以下所示：

angular.module("MyApp", [])
    .config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('$');
    $interpolateProvider.endSymbol('$');
}])
.controller("MyController", function($scope, $interpolate){
    $scope.$watch("myTextarea", function(newVal, oldVal, scope){
        var interpolatedFunc = $interpolate(newVal);
        $scope.interpolatedValue = interpolatedFunc({myName: $scope.myName});
        //$scope.interpolatedValue = interpolatedFunc(scope);        
    });
    
});

上面的代碼修改了嵌入標記，讓嵌入標記的開始和結束符都變成了$，而後咱們也就能夠在textarea中輸入$myName$會在下面的div中顯示input輸入框的內容。

T2:jsfiddle代碼在這裏

筆者水平有限，若是哪裏有說的不對的地方，還望提出，你們一塊兒進步