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

In general with components, avoid two-way binding. Instead use one-way binding with < for inputs and expression binding with & for outputs. This will make the migration to Angular 2+ easier. For more information, see AngularJS Developer Guide - Component-based application architecture. — georgeawg
– georgeawg, Commented Jul 2, 2018 at 22:10
The two-way binding with key="123" will fail with an error. See AngularJS Error Reference - Error: $compile:nonassign Non-Assignable Expression. — georgeawg
– georgeawg, Commented Jul 2, 2018 at 22:15
I do not understand. Lets say that in HeaderComponent I want to display 1 2 3 options for user A while I want to display 4 5 6 options for user B. Then, when user a makes action with option 2 (which is dedicated only for him), I want to process that action in the HeaderComponent itself, rather than in the DashbordComponent. But I want that the executed data from HeaderComponent will be accessible as just as if it was created directly in the DashboardComponent. Otherwise, all of the functions are still relay in the DashboardComponent, and I wanna leave him almost blank. — Raz Buchnik
– Raz Buchnik, Commented Jul 3, 2018 at 6:16

nicolascolman · Accepted Answer · 2018-07-02 17:46:20Z

3

Try using onInit event handler:

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

answered Jul 2, 2018 at 17:46

nicolascolman

5771 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ankit Sharma Over a year ago

Yes, @raz you can access the property using $onInit.

Raz Buchnik Over a year ago

Okay that is nice, now I can I return data created in the list component? For example, a user added a new item to the list, I need this to be returned to the main Dashboard component. How to do such a thing?

Raz Buchnik Over a year ago

BTW If I am doing something this.key else than console log, I receive an error: Error: [$compile:nonassign] Expression '123' in attribute 'key' used with directive 'listComponent' is non-assignab

georgeawg · Accepted Answer · 2018-07-03 11:46:42Z

0

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

answered Jul 3, 2018 at 11:46

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Comments

Raz Buchnik · Accepted Answer · 2018-07-12 08:34:13Z

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

}

answered Jul 12, 2018 at 8:34

Raz Buchnik

8,48917 gold badges64 silver badges117 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related