AngularJS 1.5 components binding data to controller and view with template url

Question

I want to achieve two way data binding between the view and the controller who glued by the component in AngularJS version 1.5.

The main purpose is to make a page (which is a component by itself) to handle sub-components accessing referred data.

For example, I have page name: Dashboard.

I want that this page will contain HeaderComponent ListComponent and a FooterComponent.

And I want to pass data from the Dashboard component or from the root component ($rootScope) to the ListComponent for example,

like this:

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

However I cannot find a way to access the key attribute in the ListComponent either component or controller.

This is what I have tried:

// list.js component

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

Later I will use the key in the HTML with AngularJS default directives as a two way data binding. But so far I cannot access the key attribute yet.

Thank you ;)

Answer 1

I have finally found the solution.

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

}