Question

我想在视图和由AngularJS 1.5版中的组件粘合的控制器之间实现双向数据绑定。

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

例如，我的页面名称是：Dashboard。

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

例如，我想将数据从仪表板组件或根组件（$ rootScope）传递到ListComponent，

像这样：

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

但是我找不到在组件或控制器的ListComponent中访问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中将AngularJS默认指令中的key用作双向数据绑定。但是到目前为止，我还无法访问key属性。

谢谢;）

Answer 1

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

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

Answer 2

要以字符串形式访问key属性，请对@使用属性绑定：

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

app.component('listComponent', {
  templateUrl: "/shared/list/list.html",
  bindings: {
    ̶k̶e̶y̶:̶ ̶'̶=̶'̶
    key: '@'
  },
  controller: function() {
    this.$onInit = function() {
      console.log(this.key); // 123
    };
  }
});

有关更多信息，请参见

Answer 3

我终于找到了解决方法。

app.directive("datepickerComponent", () => {
  return {
    templateUrl: "/shared/datepicker/datepicker.html",
    scope: true,
    link: function(scope, element, attrs) {
      datepickerComponent(scope, element, attrs)
    }
  }
});

function datepickerComponent(scope, element, attrs) {

}

AngularJS 1.5组件将数据绑定到控制器并使用模板url查看

3 个答案: