angularJS概念理解二:数据变化的传播

数据变化的传播

数据绑定有两个方向:

  • 数据 → 界面:我们使用scope对象的$watch()方法监听数据的变化,来更新界面。
  • 界面 → 数据:我们在界面的DOM对象上监听变化事件,来更新数据,并通过$apply()方法传播变化。

data bind

上面的图中,我们把ez-namecard和ez-namecard-editor都绑定到同一个sb对象上,那么在 ez-namecard-editor上进行编辑,将导致sb对象发生变化;由于ez-namecard监听了这个变化, 所以,ez-namecard的显示也应该变化。

  • $watch()

每个scope对象都维护了一个私有的监听队列,每次当我们在scope上执行一次$watch方法,就相当于 向这个监听队列里塞入一个监听函数。

  • $apply()

为了捕捉对数据的修改,AngularJS要求开发者使用scope对象的$apply方法对数据进行修改, $apply方法内部会自动地调用监听队列里的监听函数,比如:

  1. //方法1:直接修改sb对象. 不会自动触发监听函数
  2. scope.sb.name = 'Tonny';
  3.  
  4. //方法2:使用scope的$apply方法,在数据修改后会自动触发监听函数
  5. scope.$apply("sb.name = 'Tonny'");
  6.  
  7. //方法3:直接修改sb对象,然后调用$apply方法来传播变化。
  8. scope.sb.name = 'Tonny';
  9. scope.$apply("");

在有些情况下,AngularJS会自动调用$apply方法,比如在初次编译的时候。但无论哪种情况, 希望你能了解,对数据的变化监听,总是需要通过$apply方法的调用而被激活,如果 AngularJS没有获得一个机会来调用$apply,就需要你手工的调用它。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值