Angular 学习系列 - - $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     }
  }());

转载于:https://my.oschina.net/yeshou/blog/615008