发表于: 2017-02-10 23:16:25
2 1195
今天完成的事:修真院10期第二部分demo。10.4tag与trunk合并。
制作关于$state,$watch,$scope,$rootscope的PPT。
遇到的问题及收获:学习熟悉了一遍merge代码。trunk上面开发新版本的, branches上面进行之前的版本的bug修复,tag用来存储版本
http://blog.csdn.net/bbirdsky/article/details/24620155。
1.背景介绍
平时的编码中,我们总会想着有什么方法能够简化我们的工作流程,让我们只专心于业务逻辑和数据的处理,而angularjs就为我们程序员实现了这一点。$scope $rootScope $watch 和 $state就是里面的几个方法,今天着重跟大家讨论一下这几个方法。
2.知识剖析
1.$scope
$scope在angularjs中,你可以把它理解成作用域,每个不同的controller,都具有它不同的作用域,所以controller不同,他们的scope是不同的,那么,如果我们想象js那样,做一个全局变量该怎么办呢?这就要说到rootScope了。
2.$rootScope
$rootScope就相当于一个全局变量,所以我们保存在其中的东西是全局性的,在任一controller之中都能够使用。
scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值,可以在各个controller中使用。
3.$watch
相信使用过angularjs的同学都知道,ng中有个比较重要的特点,叫做双向绑定,那么这个双向绑定是如何实现的呢?
当我们在创建出scope下的一个新属性的时候,ng就会主动为我们新属性加上 $watch这个方法,这个方法会监听我们的数据变化,当数据变化之后,就立即把view和scope上数据同步。
4.$state
在ajax技术发展普及之后,因为其不会留下历史记录方便浏览器访问和对于seo不友好的特点,一个新技术应运而生:路由,$state就是路由中的一项服务。
3.常见问题
如何让相同的指令,具有不同的作用域
4.解决方案
只需要在指令中加上scope:{},就能把它的作用域独立出来啦!每用一次指令都会有一个不同的作用域.
5.编码实战
演示链接:https://github.com/ptteng/PPT/blob/master/demo/js07-%24watch-%24state-%24scope-%24rootscope.html
7.参考文献
深度理解scope
http://www.cnblogs.com/sitemanager/p/3513827.html
angular $watchppt
http://www.cnblogs.com/lzhp/p/3849898.html
8.更多思考
ui-sref、$state.go 的区别?
明天要做的事:查找及修复bug以及熟悉下一期的story。
评论