博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular的侦察兵:$watch()和$observe()
阅读量:6447 次
发布时间:2019-06-23

本文共 1381 字,大约阅读时间需要 4 分钟。

我也是因为一直不怎么了解这两个方法到底如何使用,所以就花功夫了解了一下;写下一点东西,如果什么时间忘记了,也比较好查找。
  • 首先我们来说一说它们两个的使用场景:

    • $watch()

      • $watch()angularscope对象的一个方法。

      • 任何一个控制器中,但是不推荐在在控制器中使用$watch();因为这样使得测试维护变得很困难。

      • 任何一个指令中,可以在指令的link函数中使用,这是一种推荐的方式。

      • 他不但可以监测angular expression的变化,还可以检测function(){}函数的变化,监测angular expression的时候会使用$parseangular expression解析为一个函数,这个函数会在angular的每个脏值检查循环中被调用。

    • $observe()

      • $observe()angular指令中link函数中实例属性即(iAttr)的一个方法。

      • 只可以在指令中使用,也是在指令的link函数中使用。

      • 它只能够监测angular expression的变化,监测的方式和上面$watch()监测angular expression的方式一样。

  • 然后我们来说一说它们的区别:

    • 控制器

      • 因为在控制器中是不推荐使用$watch()的,所以我们稍后的一些讨论主要都是在指令中讨论的。

    • 指令(不使用隔离的作用域)

      • 在不使用隔离的作用域的指令中,$watch()只能够监测不带有插值标记的angular expression,比如在<div attr1='expr' attr2='{

        {expr}}'></div>中,只可以监测attr1='expr'中的attr1,监测attr2只能够得到一个undefined,因为存在{
        {}}
        插值符号。

      • 在不使用隔离的作用域的指令中,$observe()只能够监测带有插值标记的angular expression,比如在<div attr1='expr' attr2='{

        {expr}}'></div>中,只可以监测attr2='{
        {expr}}'
        中的attr2,监测attr1只会得到一个一成不变的字符串expr

    • 指令(使用隔离的作用域)

      • 在使用隔离的作用域的指令中$watch()也可以监测带有插值标记的angular expression;因为使用了@或者=前缀标识符,它们已经帮我们实现了插值,所以可以这样使用。

  • 下面我们来看一个例子:

  • 一些建议

    • 监测元素的属性值的时候,是可以使用但是,会有一些问题,我第一次写示例的时候遇到了一些错误;比如刚开始我使用了controllerAs语法,就是用了MyController as vm并且将监测的一些属性中的变量都使用vm.prop,这样一来就出出现了一些错误,所以我在写这个的时候一些地方没有遵循。

    • 关于结果中出现undefined的解释,因为指令优先级别高于控制器,所以在指令中使用$watch()时,如果监测的表达式其中含有{

      {}}那么会出现undefined,因为在监测的时候插值字符串中的变量还没有被解析。但是在使用隔离作用域的指令中是可以的,因为@=已经帮助我们实现了变量的解析。

  • 参考的资料

    • stackoverflow上的,相应的代码我拷贝了一份,因为访问他的还是有点困难的,拷贝的那一份在

转载地址:http://dcvwo.baihongyu.com/

你可能感兴趣的文章
Android 写文件到手机
查看>>
[BZOJ2820]YY的GCD
查看>>
mongoDB 索引
查看>>
【SpringBoot】SpringBoot项目的The temporary upload location ***is not valid 问题
查看>>
把页面的Table直接输出到Excel文件中
查看>>
Linux获取当前用户信息函数
查看>>
Bash shell
查看>>
2015移动安全挑战赛 第一题
查看>>
aspx页面@Page指令解析
查看>>
关于web项目中中文乱码问题的总结
查看>>
ios 之CGRectMake
查看>>
选择排序的算法和优化
查看>>
DataGridView 输入数据验证格式(实例)
查看>>
HDOJ 2151
查看>>
Foundation框架 - 快速创建跨平台的网站页面原型
查看>>
Intel 82599网卡异常挂死原因
查看>>
open-falcon
查看>>
周会会议2018.4.20
查看>>
二叉树的建立与遍历
查看>>
《人月神话》读书笔记1
查看>>