AngularJS $parse与$eval服务用法实例

一、AngularJS $parse 服务详解：解析字符串表达式

在 AngularJS 开发中，如果你需要将一个字符串表达式“运行”起来，并获取它对应的计算值，$parse 服务正是为此而生。它能够将表达式解析成一个可调用的函数，而该函数接收的上下文对象通常就是作用域（$scope）。

更值得关注的是，通过 $parse 返回的处理函数，还附带了一个 .assign 属性。这个属性本身也是一个函数，专门用于在给定的上下文中修改表达式的值。换句话说，借助 $parse 你既能“读取”表达式结果，也能“写入”新值，实现双向操作。

来看一个典型的使用场景。假设你的 HTML 代码如下：

testing

然后在指令中这样编写：

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

为什么这里必须使用 $parse？如果属性值只是一个简单的属性名，比如 "name"，直接使用 scope[attrs.myAttr] 就能解决问题。但问题在于，这里的属性值是 "obj.name" 这种带路径的表达式——方括号语法根本无法解析这种嵌套结构。此时 $parse 的价值就完全体现出来了：它可以处理任意复杂度的 AngularJS 表达式，包括嵌套属性、过滤器运算等高级语法，极大提升了灵活性。

二、AngularJS $eval 服务：作用域内即时求值

$eval 是作用域（$scope）自带的一个便捷方法，它的用法更加直接：在当前作用域下执行一个表达式，并立即返回结果。你无需手动传递上下文，因为上下文就是当前作用域本身。

scope.a = 1;
scope.b = 2;
scope.$eval('a+b'); // 返回 3

对比来看，$parse 是先将表达式“编译”成一个可复用的函数，你可以将它存储起来反复调用，非常适合在指令的链接函数中批量处理表达式；而 $eval 则属于即开即用的模式，适合在作用域内部的某个逻辑点临时计算数值。两者各有擅长的应用场景，但本质上都在做同一件事：将字符串形式的 AngularJS 表达式转化为可执行的代码，并获取结果。