浅谈AngularJS的$parse服务

$parse
- 作用：将一个AngularJS表达式转换成一个函数
Usage
$parse(expression)
- arguments
  - expression:需要被编译的AngularJS语句
- returnsfunc(context, locals)
  - context[object]:针对你要解析的语句，这个对象中含有你要解析的语句中的表达式(通常是一个scope object)
  - locals[object]: 关于context中变量的本地变量，对于覆盖context中的变量值很有用。
  - 返回的函数还有下面三个特性：
    - literal[boolean]:表达式的顶节点是否是一个javascript字面量
    - constant[boolean]:表达式是否全部是由javascript的常量字面量组成
    - assign[func(context, local)]:可以用来在给定的上下文中修改表达式的值

尝试应用这个服务

T1:在第一个例子中，我们先解析一个简单的表达式：（注：应为代码是在jsfiddle上写的所以大家实践的时候要注意引入angular.js文件）
代码如下：
(html)

<div ng-app="MyApp">

    <div ng-controller="MyController">

        <h1>{{ParsedValue}}</h1>

    </div>

</div>

(js)

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:就是解析以后返回的函数
我们还可以通过控制台来看看返还的函数的属性:

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)

<div ng-app="MyApp">

    <div ng-controller="MyController">

        <input type="text" ng-model="expression" />

        <div>{{ParsedValue}}</div>

    </div>

</div>

(js)

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)

<div ng-app="MyApp">

    <div ng-controller="MyController">

        <div>{{ParsedValue}}</div>

    </div>

</div>

(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结果。

T3-jsfiddle代码

巴特西

浅谈AngularJS的$parse服务

尝试应用这个服务

最新文章

热门文章