javascript - AngularJS 1.5 组件使用模板 url 将数据绑定(bind)到 Controller 和 View

Question

我想在 AngularJS 1.5 版本中实现 View 和 Controller 之间的两种方式的数据绑定(bind)，这些 View 和 Controller 由组件粘合。

主要目的是制作一个页面(本身就是一个组件) 处理访问引用数据的子组件。

例如，我的页面名称:Dashboard。

我希望此页面包含 HeaderComponent ListComponent 和 FooterComponent。

例如，我想将数据从 Dashboard 组件或从根组件 ($rootScope) 传递到 ListComponent，

像这样:

<list-component key="123"></list-component>

但是，我找不到访问 ListComponent 组件或 Controller 中的 key 属性的方法。

这是我尝试过的:

// list.js component

app.component('listComponent', {
  templateUrl: "/shared/list/list.html",
  bindings: {
    key: '='
  },
  controller: function() {
    console.log(key);
    // or maybe
    console.log(this.key);
  }
});

稍后我将使用 HTML 中的 key 和 AngularJS 默认指令作为双向数据绑定(bind)。但到目前为止我还无法访问 key 属性。

谢谢;)

Answer 1

尝试使用 onInit 事件处理程序:

controller: function () {
                this.$onInit = function() {
                    console.log(this.key);
                };
}