AngularJS $eval $parse
$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'); // 3
其有个异步版本方法,$evalAsync,它会先将表达式缓存起来,等到下次$digest前执行,可以提高性能。