发表于: 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。



返回列表 返回列表
评论

    分享到