浅谈AngularJS的$parse服务

首先看看官方关于$parse的api

  • $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)]:可以用来在给定的上下文中修改表达式的值


简单说:$parse服务可以将一个表达式转换为一个函数。这个函数可以被调用,其中的参数是一个上下文对象,通常来说是作用域。

另外,通过$parse的表达式返回的这个函数有一个assign属性。这个assign属性也是一个函数,它可以用来在给定的上下文中改变这个表达式的值。


尝试应用这个服务

T1:在第一个例子中,我们先解析一个简单的表达式:

代码如下:

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <h1>{{ParsedValue}}</h1>
    </div>
</div>
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"。


T2:在第二个例子中,我们来再次使用$parse服务,来解析一个输入框中的值:

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <input type="text" ng-model="expression" />
        <div>{{ParsedValue}}</div>
    </div>
</div>
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。


T3:我们会在第三个实例中比较深入地使用$parse服务

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <div>{{ParsedValue}}</div>
    </div>
</div>
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结果。


T4:第四个实例是使用$parse服务获取和修改自定义指令中属性的值:

<div my-attr="obj.name" my-directive>testing</div>

app.directive('myDirective',function($log,$parse){
    return function(scope,elem,attrs){
		//解析"my-attr属性值到一个函数中"
        var model = $parse(attrs.myAttr);
		//model现在是一个函数,可以调用它来获取表达式的值
		//下面这行代码将会输出作用域中obj.name的值
        $log.log(model(scope));

        elem.bind('click',function(){
			//'model.assign'也是一个函数,它用来更新表达式的值
            model.assign(scope,'New name');
            scope.$apply();
        })
    }
});
	
上面的例子可以充分体现我们为什么需要$parse服务。如果属性值是name,那么我们完全可以不用$parse,只用scope[attrs.myAttr]即可。但是在上面的例子中,方括号并不管用。



转自:http://blog.csdn.net/feiying008/article/details/50222829

https://www.cnblogs.com/xujie520/p/5640850.html



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值