AngularJs $interpolate 和 $parse

$interpolate

將一個字符串編譯成一個插值函數。HTML編譯服務使用這個服務完成數據綁定。

使用：$interpolate(text,[mustHaveExpression],[trustedContext],[allOrNothing]);

text：需要被編譯的字符串。

mustHaveExpression：boolean，如果為true，那么text必須含有嵌入其中的表達式，不然將會返回null，而不是預期的interpolate function，默認為false。

trustedContext：string，如果這個參數被提供，那么在返回相應的函數之前會使用$sce.getTrusted(interpolatedResult, trustedContext)對返回的結果做處理。

$interpolate帶有一個可選的第四個參數，allOrNothing。如果allOrNothing為true，插值函數將會返回未定義除非所有嵌入表達式的計算結果不為undefined。

使用代碼：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
      <input ng-model="ctrl.text" />{{ctrl.value}}
  </div>

  (function(){
     angular.module('Demo', [])
     .controller('testCtrl',["$interpolate","$scope",testCtrl]);
     function testCtrl($interpolate,$scope) {
        var vm = this;
        var obj = { value: "Hello" };
        vm.text = "World";
        $scope.$watch("ctrl.text",function(n,o){
           var interpolate = $interpolate("{{value}} " + n);
           vm.value = interpolate(obj);
        })
     }
  }());

$parse

將Angular表達式轉換為函數。

使用：$parse(expression);

expression：被編譯的表達式。

返回：表示表達式編譯后的函數。function(context,locals)

context：對象，含有需要解析的語句中的表達式（通常是一個scope對象）。

locals：對象，局部變量的上下文對象，用於重寫上下文中的值。

屬性：

literal：boolean，表達式的頂節點是否是一個javascript字面量。

constant：boolean, 表達式是否全部是由javascript的常量字面量組成。

assign：function(context,locals)，可以用來在給定的上下文中修改表達式的值。

使用代碼：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl">
      {{ctrl.ParsedValue}}
  </div>

  (function(){
     angular.module('Demo', [])
     .controller('testCtrl',["$parse",testCtrl]);
     function testCtrl($parse) {
         var context = {
             add: function (a, b) { return a + b; },
　　          mul: function (a, b) { return a * b }
         };
         var data = {a: 2, b: 3, c: 4};
         this.value = context.mul(data.a,context.add(data.b,data.c));// 平常的函數嵌套調用   2*(3+4) = 14
         var expression = "mul(a, add(b, c))";// 表達式，將被轉換為函數
         this.ParsedValue = $parse(expression)(context, data); //執行上一句的函數   2*(3+4) = 14
     }
  }());