AngularJs $parse、$eval和$observe、$watch详解  更新时间:2016年09月21日 10:16:29   作者:菲汐   这篇文章主要介绍了AngularJs $parse、$eval和$observe、$watch的相关资料,需要的朋友可以参考下 $parse和$eval $parse和$eval这两个函数都可以解析表达式的值. 它们的区别在于$parse是一个服务, 可以注入使用. $eval是scope对象上的一个方法, 我们只能在能访问scope的场景下使用它. var getter = $parse(‘user.name’); var setter = getter.assign; var context = {user: {name: ‘John Doe’}; var locals = {user: {name: ‘Doe John’}; getter(context); //John Doe setter(context, ‘new name’); getter(context); //new name getter(context, locals); //Doe John $parse服务接收一个表达式作为参数并返回一个函数. 这个函数可以被调用, 其中的参数是一个context对象, 通常来说是作用域. 另外, 这个函数有一个assign属性. 它也是一个函数, 可以用来在给定的上下文中改变这个表达式的值. 最后一行代码演示了如何使用locals来覆盖context对象. $eval用起来要简单很多, 因为它的上下文已经被指定为scope对象. var scope = $rootscope.$new(true); scope.a = 1; scope.b = 2; scope.$eval(‘a + b’)//3 scope.$eval(function(scope){ return scope.a + scope.b; });//3 关于$parse和$eval之间的关系, 我们能从Angular源码中看出来, 可以说$eval是为了让$parse在scope中使用更方便的语法糖. $eval: function(expr, locals){ return $parse(expr)(this, locals); } $eval还有个同胞兄弟, $evalAsync, 它并不会立刻计算表达式的值, 而是将表达式缓存起来, 等到下一次$digest ( 脏检查 ) 的时候执行. 以获取更好的性能. $observe和$watch $observe和$watch都可以监听表达式值的变化. 但有显著的不同. $observe是angular指令中link函数第三个参数 ( attrs ) 的一个方法. 只能在指令的link函数中使用它. 它是通过$evalAsync函数实现监控的. $watch是scope对象上的一个方法, watch表达式很灵活, 可以是一个函数, 可以是scope上的属性, 也可以是一个字符串形式的表达式. 监听scope上的属性名或表达式的时候, 会利用$parse服务将表达式转换成一个函数, 这个函数会在$digest中被调用. $watch的第三个参数”objectEquality”, 指定比较对象的方式, 如果为true,则用angular.equals, 否则直接比较引用. 默认为false. //html //js attrs.$observe(‘book’, function(newValue){ //just have one parameter, can’t get old value }); scope.$watch(attrs.book, function(newValue, oldValue){ //get undefined }); 当你需要监听一个包含”{{}}”的DOM属性时, 使用$observe, 如果用$watch, 只能得到undefined. 反之, 就用$watch. 如果用$observe, 只能得到一个固定的字符串. //html //js attrs.$observe(‘book’, function(newValue){ //always get ‘book.name’ }); scope.$watch(attrs.book, function(newValue, oldValue){ }); 有一个特殊的情况, 当你的指令使用了独立的作用域 ( scope:{} ) , 那些应用了”@”语法的DOM属性, 即使包含”{{ }}”, 也可以被$watch. 因为@前缀标识符, 它的实现是通过$observe去监听DOM属性的变化, 这就是为什么@attr的值只能是字符串或是”{{}}”, 而不能是scope上的属性, 所以最终$watch看到的表达式是没有”{{ }}”的. 而”=”和”&”则是基于$watch实现. 所以=attr, &attr的值不能包含”{{ }}”, 但可以直接使用scope上的属性. $watchGroup和$watchCollection $watchGroup是用来监听一组表达式. 数组中任意表达式的变化都会触发监听函数. $scope.teamScore = 0; $scope.time = 0; $scope.$watchGroup([‘teamScore’, ‘time’], function(newVal, oldVal) { //newVal and oldVal are both array }); $watchCollection用来监听一个对象(包括数组), 当这个对象的任意属性发生变化时, 触发监听函数. 和$watch一样,第一次参数可以是一个返回一个对象的函数. $scope.names = [‘igor’, ‘matias’, ‘misko’, ‘james’]; $scope.dataCount = 4; $scope.$watchCollection(‘names’, function (newVal, oldVal) { $scope.dataCount = newVal.length; }); $timeout(function(){ $scope.names.pop(); },2000); $observe, $watch, $watchGroup, $watchCollection都返回一个移除监听的函数. 当需要取消监听的时候, 直接调用. var off = scope.$watch(‘name’, function(newValue, oldValue){ }); off(); 以上就是对AngularJs $parse、$eval和$observe、$watch的知识详解,谢谢大家对本站的支持! 您可能感兴趣的文章: JS中注入eval, Function等系统函数截获动态代码 JavaScript数组、json对象、eval()函数用法实例分析 angularjs中的$eval方法详解 js eval函数使用,js对象和字符串互转实例 JavaScript制作简易计算器(不用eval) js中的eval()函数把含有转义字符的字符串转换成Object对象的方法 关于动态执行代码(js的Eval)实例详解 javascript中JSON.parse()与eval()解析json的区别 JS eval代码快速解密实例解析 AngularJs $parse $eval $observe $watch 相关文章 深入讲解AngularJS中的自定义指令的使用 这篇文章主要介绍了深入讲解AngularJS中的自定义指令的使用,AngularJS是一款热门的JavaScript开发库,需要的朋友可以参考下 2015-06-06 详解angularjs 学习之 scope作用域 本篇文章主要介绍了详解angularjs 学习之 scope作用域,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 由浅入深剖析Angular表单验证 这篇文章主要介绍了由浅入深剖析Angular表单验证 的相关资料,需要的朋友可以参考下 2016-07-07 angular将html代码输出为内容的实例 今天小编就为大家分享一篇angular将html代码输出为内容的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 AngularJS中transclude用法详解 这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能、使用技巧与相关注意事项,需要的朋友可以参考下 2016-11-11 Angular Material Icon使用详解 这篇文章主要介绍了Angular Material Icon使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 angular2 ng2 @input和@output理解及示例 本篇文章主要介绍了angular2 ng2 @input和@output理解及示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 Angularjs单选框相关的示例代码 本篇文章主要介绍了Angularjs单选框相关的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 SpringMVC简单整合Angular2的示例 这篇文章主要介绍了SpringMVC简单整合Angular2的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-07-07 angularJS中$apply()方法详解 这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 2015-01-01 最新评论

$parse和$eval

$parse和$eval这两个函数都可以解析表达式的值.

它们的区别在于$parse是一个服务, 可以注入使用. $eval是scope对象上的一个方法, 我们只能在能访问scope的场景下使用它.

var getter = $parse('user.name');
var setter = getter.assign;
var context = {user: {name: 'John Doe'};
var locals = {user: {name: 'Doe John'};

getter(context); //John Doe
setter(context, 'new name');
getter(context); //new name
getter(context, locals); //Doe John

$parse服务接收一个表达式作为参数并返回一个函数. 这个函数可以被调用, 其中的参数是一个context对象, 通常来说是作用域.
另外, 这个函数有一个assign属性. 它也是一个函数, 可以用来在给定的上下文中改变这个表达式的值. 最后一行代码演示了如何使用locals来覆盖context对象.

$eval用起来要简单很多, 因为它的上下文已经被指定为scope对象.

var scope = $rootscope.$new(true);
scope.a = 1;
scope.b = 2;
scope.$eval('a + b')//3
scope.$eval(function(scope){
 return scope.a + scope.b;
});//3

关于$parse和$eval之间的关系, 我们能从Angular源码中看出来, 可以说$eval是为了让$parse在scope中使用更方便的语法糖.

$eval: function(expr, locals){
 return $parse(expr)(this, locals);
}

$eval还有个同胞兄弟, $evalAsync, 它并不会立刻计算表达式的值, 而是将表达式缓存起来, 等到下一次$digest ( 脏检查 ) 的时候执行. 以获取更好的性能.

$observe和$watch

$observe和$watch都可以监听表达式值的变化. 但有显著的不同.
$observe是angular指令中link函数第三个参数 ( attrs ) 的一个方法. 只能在指令的link函数中使用它. 它是通过$evalAsync函数实现监控的.

$watch是scope对象上的一个方法, watch表达式很灵活, 可以是一个函数, 可以是scope上的属性, 也可以是一个字符串形式的表达式. 监听scope上的属性名或表达式的时候, 会利用$parse服务将表达式转换成一个函数, 这个函数会在$digest中被调用. $watch的第三个参数”objectEquality”, 指定比较对象的方式, 如果为true,则用angular.equals, 否则直接比较引用. 默认为false.

//html
<div book="{{book.name}}"></div>
//js
attrs.$observe('book', function(newValue){
 //just have one parameter, can't get old value
});
scope.$watch(attrs.book, function(newValue, oldValue){
 //get undefined
});

当你需要监听一个包含”{{}}”的DOM属性时, 使用$observe, 如果用$watch, 只能得到undefined. 反之, 就用$watch. 如果用$observe, 只能得到一个固定的字符串.

//html
<div book="book.name"></div>
//js
attrs.$observe('book', function(newValue){
 //always get 'book.name'
});
scope.$watch(attrs.book, function(newValue, oldValue){
});

有一个特殊的情况, 当你的指令使用了独立的作用域 ( scope:{} ) , 那些应用了”@”语法的DOM属性, 即使包含”{{ }}”, 也可以被$watch.

因为@前缀标识符, 它的实现是通过$observe去监听DOM属性的变化, 这就是为什么@attr的值只能是字符串或是”{{}}”, 而不能是scope上的属性, 所以最终$watch看到的表达式是没有”{{ }}”的. 而”=”和”&”则是基于$watch实现. 所以=attr, &attr的值不能包含”{{ }}”, 但可以直接使用scope上的属性.

$watchGroup和$watchCollection

$watchGroup是用来监听一组表达式. 数组中任意表达式的变化都会触发监听函数.

$scope.teamScore = 0;
$scope.time = 0;
$scope.$watchGroup(['teamScore', 'time'], function(newVal, oldVal) {
 //newVal and oldVal are both array
});

$watchCollection用来监听一个对象(包括数组), 当这个对象的任意属性发生变化时, 触发监听函数. 和$watch一样,第一次参数可以是一个返回一个对象的函数.

$scope.names = ['igor', 'matias', 'misko', 'james'];
$scope.dataCount = 4;

$scope.$watchCollection('names', function (newVal, oldVal) {
 $scope.dataCount = newVal.length;
});

$timeout(function(){
  $scope.names.pop();
},2000);

$observe, $watch, $watchGroup, $watchCollection都返回一个移除监听的函数. 当需要取消监听的时候, 直接调用.

var off = scope.$watch('name', function(newValue, oldValue){
});
off();

以上就是对AngularJs $parse、$eval和$observe、$watch的知识详解,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • JS中注入eval, Function等系统函数截获动态代码
  • JavaScript数组、json对象、eval()函数用法实例分析
  • angularjs中的$eval方法详解
  • js eval函数使用,js对象和字符串互转实例
  • JavaScript制作简易计算器(不用eval)
  • js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
  • 关于动态执行代码(js的Eval)实例详解
  • javascript中JSON.parse()与eval()解析json的区别
  • JS eval代码快速解密实例解析
张贴在3