发表于: 2017-07-18 21:34:08
1 793
今天完成的事情:
1、学习选择省市指令。
2、学习了一波$watch和angular数据绑定过程。
明天计划的事情:
1、学习项目中的自定义指令。
遇到的问题:
1、昨天遇到的这个问题已解决,之前使用的是绝对不等于(!==),现在改为不等于(!=)之后,选择省之后,市之前的小红点不会消失,选择市之后小红点能正确消失。
ng-class={conceal:city!=undefined}
收获:
1、了解了$watch的用法,之前一直没有使用过,在自定义指令中碰到,研究了一下。
$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。
$watch(watchExpression, listener, objectEquality);
每个参数的说明如下:
watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)
objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它
2、数据绑定过程主要与以下几个参数相关。
$watch
,$apply
,$digest
,dirty-checking
我们的浏览器一直在等待事件,比如用户交互。假如你点击一个按钮或者在输入框里输入东西,事件的回调函数就会在javascript解释器里执行,然后你就可以做任何DOM操作,等回调函数执行完毕时,浏览器就会相应地对DOM做出变化。 Angular拓展了这个事件循环,生成一个有时成为angular context
的执行环境(记住,这是个重要的概念)
每次绑定一些东西到你的UI上时就会往$watch队列里插入一条$watch
。$watch
就是那个可以检测它监视的model里有变化的东西。(只有绑定到UI上才会添加)。
当浏览器接收到可以被angular context
处理的事件时,$digest
循环就会触发。这个循环是由两个更小的循环组合起来的。一个处理evalAsync
队列,另一个处理$watch
队列,$digest
将会遍历我们的$watch
这就是所谓的dirty-checking
。(也被称为脏检查)
如果有至少一个$watch更新过,这个循环就会再次触发,直到所有的$watch
都没有变化。这样就能够保证每个model都已经不会再变化。记住如果循环超过10次的话,它将会抛出一个异常,防止无限循环。 当$digest
循环结束时,DOM相应地变化。
每一个进入angular context
的事件都会执行一个$digest
循环,也就是说每次我们输入一个字母循环都会检查整个页面的所有$watch
。
$apply决定什么事件进入angular context
,而哪些又不进入!如果当事件触发时,你调用$apply
,它会进入angular context
,如果没有调用就不会进入。
$apply
是我们的$scope
(或者是direcvie里的link
函数中的scope
)的一个函数,调用它会强制一次$digest
循环(除非当前正在执行循环,这种情况下会抛出一个异常,这是我们不需要在那里执行$apply
的标志)。
评论