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前执行,可以提高性能。

原文地址:https://www.cnblogs.com/shawnhu/p/8515107.html