zoukankan      html  css  js  c++  java
  • angular的$watch和$observe的区别(翻译自Stack Overflow)

    https://stackoverflow.com/questions/14876112/angularjs-difference-between-the-observe-and-watch-methods

    首先贴原文地址。用我笨拙的英语翻译下,方便不懂英语的理解,如有更好的翻译可以轻拍砖。。。

    $observe是Attrbutes对象的一个方法,因此,它只能被用于观察DOM的attribute属性的值的改变,只能被指令内部使用或调用。当你需要观察一个DOM的attribute包含插入值(例如 attr1="Name: {{name}}",然后在指令内部 attrs.$observe(attrs, ...) 假如你试着在指令内部 scope.$watch(attrs.attr1, ...) 这样是不会起作用的,只会得到undefined。

    $watch就比较复杂了,它可以观察表达式,也就是可以是一个function或者string字符串。假如表达式是一个字符串,它将被解析为一个function(这个function会在每次digest循环都被执行)。字符串不能包含{{}}。$watch是scope上面的一个方法,因此可以用在


      一个controller,通过ng-view,ng-controller或一个directive的controller

      在directive的link function,因为这个也可以连接到scope


    因为字符串被当做angular的表达式,$watch通常被用于你想观察一个model或者scope的属性(例如 attr1="myModel.some_prop",然后controller或者link function: scope.$watch('myModel.some_prop', ...) 或者 scope.$watch(attrs.attr1, ...) )

    假如你试着 attrs.$observe('attr1'), 你将会得到字符串 myModel.some_prop,这应该不是你想要的。

    所有的$observe和$watch在每次digest循环都会被检测。

    独立作用域的指令更复杂。假如使用了@符号,你可以$observe或者$watch一个DOM被插入的attribute($watch也可以工作的原因是由于@符号帮助我们做了插入(interpolation),因此$watch可以看到没有{{}}的字符串。(这里翻译的不知道对不对,请指正))。为了更容易记住何时使用,我建议在这种情况下也使用$observe。

    为了帮助我们验证所有这些,作者写了一个plunker(http://plnkr.co/edit/HBha8sVdeCqhJtQghGxw?p=preview)。定义了两个指令,d1指令没有创造一个新的scope,d2新创造了一个独立的scope。每个指令都有相同的6个attributes属性。每个属性都被$watch和$observe。

    <div d1 attr1="{{prop1}}-test" attr2="prop2" attr3="33" attr4="'a_string'"
            attr5="a_string" attr6="{{1+aNumber}}"></div>

    打开控制台的console标签页查看$observe和$watch在link function中不同的表现。然后点击链接查看属性改变后被click方法触发后的$observe和$watch。

    注意当link function运行时,所有包含的{{}}还没有被执行。查看插入值的唯一方法是使用$observe(或者$watch,假如你使用的是独立的scope和@)。因此,获得这些属性值是一个异步的操作。

    有时你不需要$observe或者$watch。比方说你的attribute包含一个number或者Boolean(不能是字符串)直接直接执行一次:attr1="22",相当于在你的link function里面 var count = scope.$eval(attrs.attr1)。假如只是一个常量字符串(例如attr1="my string", 那就直接在你的指令里使用attrs.attr1,不需要$eval())。

  • 相关阅读:
    linux下进程的实际用户ID(有效组)和有效用户ID(有效组ID)
    ubuntu下软件中心闪退问题解决
    LINUX(UNIX)文件I/O学习
    ubunut下桌面文件路径修改
    ubuntu下设置jdk/jre环境
    Fire net
    JavaScript 自己写一个 replaceAll() 函数
    Canvas 绘制一个像素风电子时钟
    Python3 笔记01:求两数之和
    尝试笔记 01 之 CSS 边角上的标签
  • 原文地址:https://www.cnblogs.com/xiaoweiy/p/7110787.html
Copyright © 2011-2022 走看看