Angular 1.5：如何将异步数据传递给子组件

Question

我正在尝试将异步数据传递给子 d3 组件以绘制图表。

parentComponent.controller = function(){
  this.data = null;
  this.$postLink = function () {
    console.log('postlink')
    async(url).then(function(data){
        this.data = data;
    }.bind(this))
  }
}

childComponent({
  bindings: {
    data: '<'
  },
  controller: function(){
    this.$onInit = function () {
        console.log('init')
        console.log(this.data)
    }

    this.$onChanges = function () {
        console.log('onchange')
        console.log(this.data)
    }

    this.$doCheck = function () {
        console.log('docheck')
        console.log(this.data)
    }
  }
})

日志如下所示：

onchange null
init null
docheck null
postlink

但如果我同步更改父数据，它会起作用。

this.$postLink = function () {
    console.log('postlink')
    this.data = 'new data';
}

// logs
.
.
.
postlink
docheck 'new data'
onchange 'new data'

谁能告诉我为什么这不起作用以及如何制作 d3 角度组件？

Answer 1

使用$q.when 方法将可疑承诺转换为$q 服务承诺。

parentComponent.controller = function($q){
  this.data = null;
  this.$postLink = function () {
    console.log('postlink')
    //USE $q.when
    $q.when(async(url)).then(function(data){
        this.data = data;
    }.bind(this))
  }
}

$q 服务承诺 .then 方法与 AngularJS 摘要循环集成，因此对模型的更改将自动更新控制器和 DOM。

什么时候

将可能是值或（第 3 方）then-able 承诺的对象包装到 $q 承诺中。当您处理的对象可能是也可能不是 Promise 时，或者当 Promise 来自不可信的来源时，这很有用。

-- AngularJS $q Service API Reference - when