AngularJS 1.5組件將數據綁定到控制器並使用模板url查看

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);
  }
});

稍后，我將使用帶有AngularJS默認指令的HTML中的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
    };
  }
});

有關更多信息，請參見

• AngularJS開發人員指南-基於組件的應用程序體系結構
• AngularJS綜合指令API參考-范圍
• AngularJS API參考-指令控制器生命周期掛鈎

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) {

}