日度归档:2013 年 9 月 16 日

angularjs学习笔记(2)–directive 理解$apply $watch

directive是angularjs扩展html标签的方式,它通过自定义属性,元素名称,类或声明来触发一个html行为或者说是DOM的变化。
directive的运行机制是这样的:

该机制的详细描述见官方文档conceptual Overview http://docs.angularjs.org/guide/concepts
需要注意的是大多数情况下(如在控制器,服务中),$apply都已经被用来处理当前事件的相应指令执行过了。只有当你使用自定义的事件回调或者是使用第三方类库的回调时,才需要自己执行$apply。
看下面的例子。
index.html:

app.html

运行结果如下:

这个时候,我们的directive只有link函数。在link函数里,默认的,我们能获得scope,element和attrutes。但是我们还不能把active类应用于按钮。
如果用$watch来观测表达式的变换和$apply来将变换传播给view。
app.js改为如下:

结果如下:

我们看看这个例子里按钮的点击事件是怎样绑定到视图的:
1.在编译阶段:button上的ng-modelg给绑定一个keyup事件;{{options.xxx}}变量通过$watch来接受鼠标所选择按钮,并将options对应的值改变,并给按钮添加或移除active样式。
2.在执行阶段:点击一个按钮后释放,就会触发button的keyup事件;然后调用$apply(“options.xxx = ‘X’;”)来更新处于AngularJS执行上下文中的模型;AngularJS将 options.xxx=’X’应用到模型上;$digest 循环开始;$watch 列表检测到了options.xxx值的变化,然后通知 ngModel.$modelValue变量来获得改变的值,更新{{options.xxx}}和相应的选择状态。用function(modelValue)这个回调函数来改变相应button的样式;AngularJS退出执行上下文,然后退出Javascript上下文中的keyup事件;
浏览器以更新的文本重渲染视图。

参考文章:watch how the $apply runs a digest http://www.cnblogs.com/rubylouvre/p/3268238.html
angularjs 移除不必要的$watch http://www.cnblogs.com/whitewolf/p/angularjs-remove-unused-watch.html
Getting started with AngularJS Directive http://suhairhassan.com/2013/05/01/getting-started-with-angularjs-directive.html#.UjXcRdKmger
AngularJS开发指南04:核心概览: http://www.angularjs.cn/A00q
AngularJS文档 http://docs.angularjs.org/guide/scope http://docs.angularjs.org/guide/concepts
directive tutorial http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/