angularJs $apply
来源:互联网 发布:lda算法 主题模型 编辑:程序博客网 时间:2024/05/22 15:03
- Scope的特性
接下来,看看Scope有哪些特性呢?
- Scope提供$watch方法监视Model的变化。
- Scope提供$apply方法传播Model的变化。
- Scope可以继承,用来隔离不同的application components和属性访问权限。
- Scope为Expressions的计算提供上下文。
对于这四点特性,因为我之前学习过ActionScript、C++、Java,所以第一、三、四点不难理解,唯独第二点感觉有点云里雾里。本着打破沙锅问到底的原则,我还是通过Google搜到了一些东西。对于有经验的老手,板砖请轻拍!
- 源起Javascript
首先,乍一看,
var button = document.getElementById('clickMe');
function buttonClicked () { alert('the button was clicked');}
button.addEventListener('click', buttonClicked);
function timerComplete () { alert('timer complete');}
setTimeout(timerComplete, 5000);
当加载Javascript代码时,先先找一个一个id叫“clickMe”的按钮,然后添加一个监听器,然后设置超时。等待5秒,会弹出一个对话框。如果刷新页面并立即点击clickMe按钮,会弹出一个对话框,如果你不点击OK,timerComplete函数永远没有机会执行。
- 如何更新bindings
好了,扯了一些看似不相关的东西之后,我们回归正题。angular JS是怎么知道什么时候数据的变化和页面需要更新的呢?代码需要知道什么时候数据被修改了,但是现在又没有一种方法直接去通知说某个对象上的数据变了(尽管ECMAScript 5正在尝试解决这一问题,但也还是处于实验阶段)。而目前比较主流的策略有以下有两种解决方案。一种是需要用特殊的对象,让所有的数据都只能通过调用对象的方法设置,而不是直接通过property指定。这样的话,所有的修改就可以被记录下来了,就知道什么时候页面需要更新了。这样做的弊端就是我们必须去继承一个特殊的对象。对于赋值也只能通过object.set('key', 'value')而不是object.key=value的方式。在框架中,像EmberJS和KnockoutJS就是这么干的(虽然我都没接触过——囧)。另一种就是angular JS采用的方式,在每一次Javascript代码执行序列执行结束后都去检查是否有数据的改变。这看起来似乎并不高效,甚至严重影响性能。但是angular JS采用了一些比较巧妙的手段解决了这个问题(还没研究过,目前尚不明确)。这么做的好处就是,我们可以随便使用任意对象,对于赋值方式也没有限制,而且对于数据的改变也能觉察到。
对于angular JS采取的这种解决方案,我们关心的是什么时候数据发生了变化,而这也正是
- 什么时候用$apply()
还是那个问题,那我们到底什么时候需要去调用
[HTML]
<div ng:app ng-controller="Ctrl">{{message}}</div>
[Javascript]
functionCtrl($scope) { $scope.message ="Waiting 2000ms for update"; setTimeout(function () { $scope.message ="Timeout called!"; // AngularJS unaware of update to $scope }, 2000);
}
上面的代码执行后页面上会显示:Waiting 2000ms for update。显然数据的更新没有被angular JS觉察到。
接下来,我们将Javascript的代码稍作修改,用
[Javascript]
functionCtrl($scope) { $scope.message ="Waiting 2000ms for update"; setTimeout(function () { $scope.$apply(function () { $scope.message ="Timeout called!"; }); }, 2000);
}
这次与之前不同的是,页面上先会显示:Waiting 2000ms for update,等待2秒后内容会被更改为:Timeout called! 。显然数据的更新被angular JS觉察到了。
NOTE:我们不应该这样做,而是用angular JS提供的
- 科学是把双刃剑
最后,我们再来瞅一眼
function$apply(expr) { try { return$eval(expr); } catch(e) { $exceptionHandler(e); } finally { $root.$digest(); }}
它会捕获所有的异常并且不会再抛出来,最后都会调用$digest()方法。
- 总结一下
$apply()方法可以在angular框架之外执行angular JS的表达式,例如:DOM事件、setTimeout、XHR或其他第三方的库。
- AngularJs $apply
- angularJs $apply
- angularJS之$apply()方法
- angularjs $scope.$apply()
- AngularJS and scope.$apply
- [AngularJs问题] $digest $apply
- angularJS之$apply()方法
- AngularJs $scope.$apply
- 《AngularJS》----$apply 与 $watch
- 浅析AngularJS中的$scope.$apply
- angularjs中的$degist,$watch,$apply
- angularJS中$apply()方法详解
- angularJs 中的$watch与$apply
- AngularJS: $watch() , $digest() and $apply()
- angularjs $scope.$apply 方法详解
- angularJS中$apply()方法详解
- AngularJS中$digest和$apply
- angularJS中$apply()方法详解
- xlistview上拉加载,下拉刷新
- C3P0配置实战
- ios安全学习资料汇总
- c3p0在spring下的配置过程
- javascript函数的定义
- angularJs $apply
- jsp input文件上传操作
- git egit 如何 revert恢复原来代码
- Otto的封装使用
- Android 修改文件权限 LINUX 命令
- 分布式缓存技术redis学习系列(三)——redis高级应用(主从、事务与锁、持久化)
- Android中LinearLayout框架使用案例26Days TO_1
- 面向对象的三大特征
- Android自带的下载功能,不需要断点续传、大文件下载、通知栏显示等窝心问题,四行代码全部搞定(经测)