angular 1.5.8 项目回顾

父子组件传值


angular 1.5.8 项目回顾_第1张图片
requirement.png

需求

  • 父组件请求接口获取初始数据data
  • 通过binding(<)单向传递给子组件
  • 子组件在click事件后,发送广播,通知父组件更新data
  • 子组件实时更新


子组件在初始化时,在控制器中,用新的变量代替传递的字段

// data为通过binding传递的字段
this.childData = this.data.childData

在子组件的template中使用childData

{{$ctrl.childData}}

此时会有两个问题:

  1. this.childData 在组件初始化之后,延时500ms左右才真正有值。
  2. 不会实时更新

现象归纳

通过binding绑定的data

  • 在template中通过$ctrl.data可以立即获取到;
  • 在controller中通过this.data不能立即获取到,会有延时。

解决方案

  • 建议直接在template中使用$ctrl.data方式。
  • 变化监听
    如果必须在controller中使用this.data方式,可通过变化监听函数$.onChanges()实现。

你可能感兴趣的:(angular 1.5.8 项目回顾)