$eval $parse都可以解析或计算Angular表达式的值。
一、$parse
是一个独立的可以注入的服务,注入就可以使用,它返回一个函数,我们需要显式将表达式求值的上下文传递给该函数。$parse服务可以讲一个表达式转换为一个函数。这个函数可以被调用,其中的参数是一个上下文对象,通常来说是作用域。
例子1:
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);
});
<div ng-app="MyApp">
<div ng-controller="MyController">
<div>{{ParsedValue}}</div>
</div>
</div>
结果是45,$parse服务根据$scope.context中提供的上下文解析$scope.expression语句,然后使用$scope.data数据填充表达式中的变量,如果把$scope.expression中的c换成4,那么结果就是30。
例子2:
HTML同例子1
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:就是解析以后返回的函数
二、$eval
$eval是一个作用域scope中的方法,它将会在当前作用域中执行一个表达式并返回结果。是为了让$parse在scope中更方便使用而设计的语法糖。
var scope =$rootScope.$new(true);
scope.a = 1;
scope.b = 2;
scope.$eval('a+b'); //
其有个异步版本方法,$evalAsync,它会先将表达式缓存起来,等到下次$digest前执行,可以提高性能。