Компоненты AngularJS 1.5 связывают данные с контроллером и просматривают с помощью шаблона URL

Question

Я хочу добиться двухсторонней привязки данных между представлением и контроллером, который склеивается компонентом в AngularJS версии 1.5.

Основная цель - сделать страницу (которая сама по себе является компонентом) для обработки субкомпонентов, обращающихся к указанным данным.

Например, у меня есть имя страницы: Dashboard.

Я хочу, чтобы эта страница содержала HeaderComponent ListComponent и FooterComponent.

И я хочу передать данные из компонента Dashboard или из корневого компонента ($ rootScope) в ListComponent, например,

как это:

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

Однако я не могу найти способ доступа к атрибуту key в ListComponent ни компонента, ни контроллера.

Вот что я пробовал:

// list.js component

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

Позже я буду использовать key в HTML с директивами AngularJS по умолчанию в качестве двухсторонней привязки данных. Но пока я не могу получить доступ к атрибуту key.

Спасибо;)

Answer 1

Чтобы получить доступ к атрибуту 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 - Компонентная прикладная архитектура
• Справочник по API AngularJS - область действия
• Справочник по AngularJS API - Крючки жизненного цикла контроллера Директивы

Answer 2

Я наконец нашел решение.

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

}

Answer 3

Попробуйте использовать обработчик события onInit:

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