angular中$scope.$apply和$scope.$digest的区别
来源:互联网 发布:直销结算软件 编辑:程序博客网 时间:2024/06/05 19:48
$scope.$apply和$scope.$digest都可以手动触发脏值检查实现数据双向同步;将数据实时表现在界面上;
最直接的差异是,$apply可以带参数,它可以接受一个函数,然后在应用数据之后,调用这个函数。除此之外,还有别的区别吗?
在简单的数据模型中,这两者没有本质差别,但是当有层次结构的时候,就不一样了。考虑到有两层作用域,我们可以在父作用域上调用这两个函数,也可以在子作用域上调用,这个时候就能看到差别了。
对于$digest来说,在父作用域和子作用域上调用是有差别的,但是,对于$apply来说,这两者一样。我们来构造一个特殊的示例:
var app = angular.module("test", []);app.directive("increasea", function() { return function (scope, element, attr) { element.on("click", function() { scope.a++; scope.$digest(); }); };});app.directive("increaseb", function() { return function (scope, element, attr) { element.on("click", function() { scope.b++; scope.$digest(); //这个换成$apply即可 }); };});app.controller("OuterCtrl", ["$scope", function($scope) { $scope.a = 1; $scope.$watch("a", function(newVal) { console.log("a:" + newVal); }); $scope.$on("test", function(evt) { $scope.a++; });}]);app.controller("InnerCtrl", ["$scope", function($scope) { $scope.b = 2; $scope.$watch("b", function(newVal) { console.log("b:" + newVal); $scope.$emit("test", newVal); });}]);<div ng-app="test"> <div ng-controller="OuterCtrl"> <div ng-controller="InnerCtrl"> <button increaseb>increase b</button> <span ng-bind="b"></span> </div> <button increasea>increase a</button> <span ng-bind="a"></span> </div></div>
这时候,我们就能看出差别了,在increase b按钮上点击,这时候,a跟b的值其实都已经变化了,但是界面上的a没有更新,直到点击一次increase a,这时候刚才对a的累加才会一次更新上来。怎么解决这个问题呢?只需在increaseb这个指令的实现中,把$digest换成$apply即可。
当调用$digest的时候,只触发当前作用域和它的子作用域上的监控,但是当调用$apply的时候,会触发作用域树上的所有监控。
因此,从性能上讲,如果能确定自己作的这个数据变更所造成的影响范围,应当尽量调用$digest,只有当无法精确知道数据变更造成的影响范围时,才去用$apply,很暴力地遍历整个作用域树,调用其中所有的监控。
从另外一个角度,我们也可以看到,为什么调用外部框架的时候,是推荐放在$apply中,因为只有这个地方才是对所有数据变更都应用的地方,如果用$digest,有可能临时丢失数据变更。
阅读全文
0 0
- angular中$scope.$apply和$scope.$digest的区别
- angularJS<五、$scope中的$apply和$digest>
- $scope里的$apply、$digest方法
- angular1.0 $scope.$apply() $scope.$digest();用法
- AngularJs学习笔记(3)--$scope中的$apply和$digest方法
- 全面解析Angular中$Apply()及$Digest()的区别
- Angular中$scope的$watch
- angular中scope的用法
- Angular($digest和$apply)
- angular attrs.$observe和$scope.$watch的区别
- angualr高级篇之elem.scope()、elem.isolateScope和$compile(elem)(scope)中scope的区别
- angular.js的$apply 和 $digest()
- angular directive中scope:{}
- 理解angular中$rootscope和$scope
- Angular JS中scope的作用域
- angular中directive的scope用法
- angular指令中scope的绑定策略
- Angular之$apply和$digest
- 递归查找子物体/获取子物体上组件
- 数据结构 顺序查找(算法思想和源代码)
- 模仿NameNode和DataNode之间通信
- 数据结构-->栈-数组实现
- spring依赖对象的自动装配
- angular中$scope.$apply和$scope.$digest的区别
- python绘制随机网络图形
- NO4、python运算符
- 栈的应用 表达式求值
- POJ 2406 Power Strings (KMP) kmp循环节
- 阿里云centos环境之mysql安装<二>
- 记录自学Java的第一篇
- ACM-10月19日周四周中训练心得
- Python3中dict.keys()转换成list类型