zoukankan      html  css  js  c++  java
  • angularjs的数据双向绑定怎么实现的?

    一. 单向绑定(ng-bind)和双向绑定(ng-model)的区别:

    1.ng-bind 单向数据绑定($scope->view),用于数据显示,简写形式,{{}}。

    <span ng-bind="val"></span>
    <span>{{val}}</span>

    而这两者的区别,在于页面没有加载完毕时,{{val}}会直接显示到页面,直到angular渲染该绑定数据,这种写法可能将{{val}}让用户看到;而ng-bind则在angular渲染完毕后将数据显示。

    2.ng-model是双向数据绑定($scope->view , view->$scope),用于绑定值会变化到数据。

    <input type="text" ng-model="val"  />

    二. angularjs双向数据绑定原理

    这里有三个概念:

    1.  $digest(): 脏值检查循环;

    2. $watch(): 监听;

    3. $apply(): 上下文执行表达式.

    angularjs脏值检查机制只在指定事件触发后,才会进入$digest cycle,包括:

    1.dom事件,如文本输入,点击事件等。

    2. XHR响应事件($http/$https);

    3.浏览器Location变更事件($location);

    4.Timer事件($timeout, $interval);

    5.执行$digest()或$apply();

    ->上述事件发生

    ->$digest()循环

    ->触发每个watcher

    ->watcher检查scope中,当前model值和上一次计算得到的model值是否一致

    ->如果不同,则$watch()对应的回调函数会被执行

    ->调用该函数的结果,就是view中的表达式内容会被更新。

    angularjs并不直接调用$digest(),而是调用$scope.$apply(),后者会调用$rootScope.$digest()。所以,一轮$digest()循环在$rootScope开始,然后会访问到所有到子scope中到watchers。

  • 相关阅读:
    关于slot标签的使用
    vue组件
    template和component的理解(待更正)
    input 的属性autocomplete
    关于render: h => h(App)和components: { App }的区别
    关于vue的简单知识
    获取页面跳转携带的参数
    关于跨域的简单想法(此想法是错误的,特此备注)
    关于jq建立类似与双向绑定的函数
    关于jq将一个页面引入另一个页面,类似与组件化的解决方案
  • 原文地址:https://www.cnblogs.com/starrk-01/p/9498569.html
Copyright © 2011-2022 走看看