AngularsJS中的$parse、$eval

原创于 2021-03-17 21:21:30 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #angularjs

前端专栏收录该内容

179 篇文章

订阅专栏

本文详细介绍了AngularJS中的$parse服务，它能将表达式转化为可执行函数，允许在指定作用域内获取或设置表达式值。在示例中，$parse用于解析'div'元素的'my-attr'属性，当元素被点击时，通过model.assign更新表达式值。同时，提到了$eval服务，作为作用域的方法，它执行表达式并返回结果。在示例中，展示了如何使用scope.$eval获取'a+b'的计算结果。这两个服务在动态数据绑定和指令实现中起到关键作用。

`一、$parse服务`

$parse服务可以将一个表达式转换为一个函数。这个函数可以被调用，其中的参数是一个上下文对象，通常来说是作用域。
另外，通过$parse的表达式返回的这个函数有一个assign属性。这个assign属性也是一个函数，它可以用来在给定的上下文中改变这个表达式的值。

<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]即可。但是在上面的例子中，方括号并不管用。

`$eval服务`

$eval是一个作用域scope中的方法，它将会在当前作用域中执行一个表达式并返回结果：

scope.a = 1;
scope.b = 2;

scope.$eval('a+b'); // 3