【郑州分院第一百一十一期】ANGULAR之中,$STATE $W
1.背景介绍
在平时的编码中,我们总会想着有什么方法能够简化我们的工作流程,让我们只专心于业务逻辑和数据的处理,而angularjs 就为我们程序员实现了这一点。$scope $rootScope $watch 和 $state就是里面的几个方法,今天着重跟大家讨论一下这 几个方法.
2.知识剖析
$SCOPE
$scope在angularjs中,你可以把它理解成作用域,每个不同的controller,都具有它不同的作用域,所以 controller不同,他们的scope是不同的,那么,如果我们想象js那样,做一个全局变量该怎么办呢?这就要说 到rootScope了。
$ROOTSCOPE
$rootScope就相当于一个全局作用域,所以我们保存在其中的东西是全局性的,在任一controller之中都能够使用
scope是html和单个controller之间的桥梁,数据绑定就靠他了。rootscope是各个controller中scope的桥梁。 用rootscope定义的值,可以在各个controller中使用。
$WATCH
相信使用过angularjs的同学都知道,ng中有个比较重要的特点,叫做双向绑定,那么这个双向绑定是如何实现的呢? 当我们在创建出scope下的一个新属性的时候,ng就会主动为我们新属性加上$watch这个方法,这个方法会监听我们 的数据变化,当数据变化之后,就立即把view和scope上数据同步。
$watch(watchExpression, listener, objectEquality);
watchExpression,需要监控的表达式
listener,处理函数,函数参数如下 function(newValue,oldValue, scope)
objectEquality,是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它
$STATE
在ajax技术发展普及之后,因为其不会留下历史记录方便浏览器访问和对于seo不友好的特点,一个新技术应运而生: 路由,$state就是路由中的一项服务。
3.常见问题
如何让相同的指令,具有不同的作用域
4.解决方案
只需要在指令中加上scope:{},就能把它的作用域独立出来啦!每用一次指令都会有一个不同的作用域哟
5.编码实战
如果我们需要它有不同的作用域,如何实现呢?
{ }:创建一个新的“隔离”scope,但仍可与父scope通信 隔离的scope,通常用于创建可复用的指令,也就是它不用管父scope中的model。然而虽然说是“隔离”,但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种:
@:单向绑定,外部scope能够影响内部scope,但反过来不成立
=:双向绑定,外部scope和内部scope的model能够相互改变
&:把内部scope的函数的返回值和外部scope的任何属性绑定起来
6.扩展思考
路由的具体用法
http://blog.csdn.net/fansongy/article/details/44162685
7.参考文献
参考一:深度理解scope
ANGULAR之中,$STATE i分别是什么?_腾讯视频
文本链接:http://www.jnshu.com/daily/23221?dailyType=others&total=101&page=2&uid=6429&sort=0&orderBy=3
PPT链接:https://ptteng.github.io/PPT/PPT/js-07-$state$watch$scope$rootscope.html
视频链接:https://v.qq.com/x/page/k0503p9oko9.html
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。
这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !http://www.jnshu.com/login/1/64290793