#6 $eval,$parse和$interpolate

$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

codepen代码

总结

主要学习:

  • $eval, $parse, $interpolate是什么
  • 使用$eval, 可以添加函数或locals
  • $parse 和 $scope, locals, $parse(..).assign()
  • 使用$interpolate, 表达式和filters
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容