CODEWITHSUNDEEP
javascriptangularjsangularjs-components
Raz Buchnik
Raz Buchnik

Reputation: 8401

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

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

Upvotes: 2

Views: 1614

Answers (3)

Raz Buchnik
Raz Buchnik

Reputation: 8401

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

}

Upvotes: -1

georgeawg
georgeawg

Reputation: 48948

To access the key attribute as a string, use attribute binding with @:

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

For more information, see

Upvotes: 0

nicolascolman
nicolascolman

Reputation: 579

Try using onInit event handler:

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

Upvotes: 3

Related Questions