首先看看官方关于$parse的api
- $parse
- 作用:将一个AngularJS表达式转换成一个函数
- Usage
$parse(expression)
- arguments
-
expression
:需要被编译的AngularJS语句
-
- returns
func(context, locals)
-
context[object]
:针对你要解析的语句,这个对象中含有你要解析的语句中的表达式(通常是一个scope object) -
locals[object]
: 关于context中变量的本地变量,对于覆盖context中的变量值很有用。 - 返回的函数还有下面三个特性:
-
literal[boolean]
:表达式的顶节点是否是一个javascript字面量 -
constant[boolean]
:表达式是否全部是由javascript的常量字面量组成 -
assign[func(context, local)]
:可以用来在给定的上下文中修改表达式的值
-
-
- arguments
尝试应用这个服务
T1:在第一个例子中,我们先解析一个简单的表达式:(注:应为代码是在jsfiddle上写的所以大家实践的时候要注意引入angular.js文件)
代码如下:
(html)
html
<div ng-app="MyApp"> <div ng-controller="MyController"> <h1>{{ParsedValue}}</h1> </div> </div>
(js)
javascript
angular.module("MyApp",[]) .controller("MyController", function($scope, $parse){ var context = { name: "dreamapple" }; // 因为这个解析的语句中含有我们想要解析的表达式, // 所以要把不相关的用引号引起来,整体然后用+连接 var expression = "'Hello ' + name"; var parseFunc = $parse(expression); $scope.ParsedValue = parseFunc(context); });
expression:是我们想要解析的表达式
context:就是一个解析表达的上下文环境(个人理解)
parseFunc:就是解析以后返回的函数
我们还可以通过控制台来看看返还的函数的属性:
javascript
angular.module("MyApp",[]) .controller("MyController", function($scope, $parse){ var context = { name: "dreamapple" }; // 因为这个解析的语句中含有我们想要解析的表达式, // 所以要把不相关的用引号引起来,整体然后用+连接 var expression = "'Hello ' + name"; var parseFunc = $parse(expression); //false console.log(parseFunc.literal); //false console.log(parseFunc.constant); //undefined console.log(parseFunc.assign); //hello console.log(parseFunc()); //function (self, locals) { // return fn(self, locals, left, right); // } console.log(parseFunc); $scope.ParsedValue = parseFunc(context); });
从控制台我们可以知道,返还的parseFunc是一个函数,其中它的literal和constant属性都是false,而且parseFunc()返回的是没有加入函数运行上下文的值即”Hello”。
T1-jsfiddle代码
T2:在第二个例子中,我们来再次使用$parse服务,来解析一个输入框中的值:
(html)
html
<div ng-app="MyApp"> <div ng-controller="MyController"> <input type="text" ng-model="expression" /> <div>{{ParsedValue}}</div> </div> </div>
(js)
javascript
angular.module("MyApp",[]) .controller("MyController", function($scope, $parse){ $scope.$watch("expression", function(newValue, oldValue, context){ if(newValue !== oldValue){ var parseFunc = $parse(newValue); $scope.ParsedValue = parseFunc(context); } }); });
我们使用$watch监测input输入框的变化,每当输入框中的表达式的值发生变化时,我们都会解析它,我们可以尝试向输入框中输入”1+1″,然后就会看到下面显示2。
T2:jsfiddle代码
T3:我们会在第三个实例中比较深入地使用$parse服务
(html)
html
<div ng-app="MyApp"> <div ng-controller="MyController"> <div>{{ParsedValue}}</div> </div> </div>
(js)
js
angular.module("MyApp",[]) .controller("MyController", function($scope, $parse){ $scope.context = { add: function(a, b){return a + b;}, mul: function(a, b){return a * b} } $scope.expression = "mul(a, add(b, c))"; $scope.data = { a: 3, b: 6, c: 9 }; var parseFunc = $parse($scope.expression); $scope.ParsedValue = parseFunc($scope.context, $scope.data); });
我们可以看到结果是45,我们大致可以这样理解,$parse服务根据$scope.context中提供的上下文解析$scope.expression语句,然后使用$scope.data数据填充表达式中的变量注意,如果把$scope.expression中的c换成4,那么结果就是30,所以得到45结果。