zoukankan      html  css  js  c++  java
  • AngularJS1.X版本双向绑定九问

    前言

    由于工作的原因,使用angular1.x版本已经有一段时间了,虽然angualr2升级后就完全重构了,但每个版本存在也有一定的道理。话不多说,进入正题。

    1.双向绑定的原理是什么?

    AngualrJS的双向绑定基于脏检查机制,$scope上有一个监听队列,每当向视图上绑定一个值,就会向watch list中插入一个watch,当遇到可以被Angular context处理的事件,就会触发$digest循环,遍历所有的watch,更新DOM。

    2.什么操作会触发$digest循环?

    UI发生变化,ajax请求,ng-click,$timeout...

    3.如果一个watch中又包含一个watch,该watch中对应的scope model发生了变化,这种情况是怎么处理的呢?

    $digest循环并不是只运行一次的,一旦angualar运行整个$watch列表,如果任何值发生改变,应用程序将回退到$watch循环,直到它检测到没有任何更改。

    4.如上所述,如果有值发生变化就回退到watch循环,这样会造成死循环吗?

    不会,如果循环运行超过十次,angular会抛出异常,应用程序就会死掉。

    5.如下代码,ng-click事件什么都没有做,会有脏检查吗?

    <button ng-click="">click</button>

    会。

    6.隐藏的元素,会检查绑定在它上面的表达式吗?

    会。

    7.重复的表达式会重复检查吗?


    会。
    关于以上三个问题的总结,一个绑定表达式只要放在当前 DOM 树里就会被监视,不管它是否可见,不管它是否被放在另一个 Tab 里,更不管它是否与用户操作相关。

    8.$apply与$digest的区别

    $apply会从rootScope上调用$digest

    9.什么情况下手动调用$apply?

    大致想到两种场景

    • 自定义指令,绑定到$scope上的数据,更新DOM
    • setTimeout的回调函数中涉及对$scope上的数据进行操作,要更新对应的视图。(将setTimeout改成$timeout的话,就不用手动调用$scope.$apply了)

    后记

    如有写的不正确的地方,欢迎留言讨论。参考文章The-Digest-Loop-and-apply

    另外附上我的掘金地址https://juejin.im/user/5c0760bee51d451db767bd04,以后掘金上也会更新文章啦。

  • 相关阅读:
    HDU 1022 Train Problem I
    HDU 1702 ACboy needs your help again!
    HDU 1294 Rooted Trees Problem
    HDU 1027 Ignatius and the Princess II
    HDU 3398 String
    HDU 1709 The Balance
    HDU 2152 Fruit
    HDU 1398 Square Coins
    HDU 3571 N-dimensional Sphere
    HDU 2451 Simple Addition Expression
  • 原文地址:https://www.cnblogs.com/jingmi-coding/p/10142943.html
Copyright © 2011-2022 走看看