$eval, $parse, $interpolate 这3个服务都是对值进行直接的计算，它们之间有很多相似点，当然也存在差异:
-
$eval,$interpolate内部其实都是调用$parse这个服务 -
$parse,$interpolate返回的都是一个函数，可以自定义作用域，而$eval只能用于当前作用域 -
$interpolate可以直接使用表达式，表达式内部可以使用filters -
$parse(someProperty).assign()可以触发digest process
有一个坑， $eval服务不需要注入，直接写即可，比如下面这种写法会报错:
// 出现错误
// '$eval'无需注入，直接使用即可
app.controller('sample', ['$scope', '$eval', function($scope, $eval) {
// ...
}])
下面通过示例来看这几个服务的用法:
$eval
这个服务有几种写法：
// 写法1 直接对当前作用域中的a, b进行操作
$scope.$eval('a*b')
// 写法2 假设a=2, b=3, c不在当前作用域 可以接一个对象(称之为 'locals')
// 下面表示给变量重新赋值 a=10 c=5
$scope.$eval('a * b * c', {a: 10, c: 5})
// 写法3 接一个函数
// {c: 5} 表示的locals对象
var r = $scope.$eval(function(scope, locals) {
return scope.a * scope.b * locals.c
}, {c: 5})
示例:
app.controller('sample', function($scope) {
$scope.a = 1;
$scope.b = 2;
$scope.demoEval = function() {
var r = $scope.$eval('a * b * c', {c: 3});
alert('result is ' + r);
}
})
// html
<div ng-controller="sample">
a: {{a}} <br/>
b: {{b}} <br/>
result: {{a * b}}
<hr />
<button ng-click="demoEval()">eval</button>
</div>
// 当点击按钮时，会弹出 (1 * 2 * 3 = 6)
result is 6
$parse
其它2个服务内部调用这个服务，使用方式也比较灵活， 返回一个函数，后面可以跟一个作用域($scope)，或者一个对象 locals(用于改变变量的值), 使用时需要注入该服务:
// html
<div ng-controller="sample">
a: {{a}} <br/>
b: {{b}} <br/>
result: {{a * b}}
<hr />
<button ng-click="demoParse()">demoParse</button>
<button ng-click="changeName()">changeName</button> {{info.name}}
</div>
// js
app.controller('sample', function($scope, $parse) {
$scope.a = 1;
$scope.b = 2;
$scope.info = {
name: 'James',
age: 27
};
$scope.demoParse = function() {
var f = $parse('a * b'); // 返回一个函数
var r = f($scope); // 一种写法，返回的函数跟一个指定作用域
alert('result is ' + r);
// 写法2 后面跟一个对象，重新给作用域中的变量赋值
var r2 = $parse('a * b * c')({a: 3, b: 4, c: 5});
alert('result2 is ' + r2)
};
$scope.changeName = function() {
// 写法3 使用 assign()
// 触发 digest process
// 第1个参数为自己定义的，此处为作用域
// 第2个参数给 info.name 重新赋值为 'KOBE'
$parse('info.name').assign($scope, 'KOBE');
}
})
// 点击demoParse按钮， 弹出
result is 2
result2 is 60
// 点击changeName按钮
'James' 将变为 'KOBE'
$interpolate
插值服务, 值得注意的是这个需要添加一个表达式
// html
<div ng-controller="sample">
a: {{a}} <br/>
b: {{b}} <br/>
result: {{a * b}}
<hr />
<button ng-click="demoInterpolate()">demoInterpolate</button>
</div>
// js
// 注入$interpolate服务
app.controller('sample', function($scope, $interpolate) {
$scope.a = 1;
$scope.b = 2;
$scope.demoInterpolate = function() {
// 注意此处为表达式{{a * b}}
// 使用filter 功能
var f = $interpolate("{{a * b | currency: '￥'}}") // 返回一个函数
// 写法1
var r = f($scope); // 指定作用域
alert('result1 is ' + r);
// 写法2 重新给变量赋值
var r2 = f({a: 10, b: 10})
}
})
// 点击demoInterpolate按钮， 弹出
result1 is ￥2.00
result2 is ￥100.00
总结
主要学习：
- $eval, $parse, $interpolate是什么
- 使用$eval, 可以添加函数或locals
- $parse 和 $scope, locals， $parse(..).assign()
- 使用$interpolate, 表达式和filters
