Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 1.6 bindings inside controller

Im trying to pass some parameters to my component through bindings, but unfortunately I'm not having luck in using those params in my controller, this is my code:

angular.module('project1').component('menu', {
    templateUrl: '/static/js/templates/menu.template.html',
    bindings: {
        rid: '@'
    },
    controller: ['Restaurant', function RestaurantListController(Restaurant) {
        console.log(this.rid);
        console.log(this);
        this.restaurant = Restaurant.get({restaurantId: this.rid});
    }]
});

HTML component:

<menu rid="1"></menu>

The interesting thing is that i can access the parameters in the template and when i do the 2 console log, the first one is undefined, but in the second one i can see the rid variable...so, i really don't understand what i'm missing.

like image 387
Dave Plug Avatar asked Dec 25 '16 17:12

Dave Plug


People also ask

Can we put nested controllers in an angular application?

Nested Controllers: AngularJS allows using nested controllers. It means that you have specified a controller in an HTML element which is a child of another HTML element using another controller.

What is $Ctrl in AngularJS?

$ctrl is the view model object in your controller. This $ctrl is a name you choose (vm is another most common name), if you check your code you can see the definition as $ctrl = this; , so basically its the this keyword of the controller function.

What is Oninit in AngularJS?

OnInitlinkA lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.

Is AngularJS supports two-way binding?

Two-way BindingData binding in AngularJS is the synchronization between the model and the view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.


1 Answers

With angular 1.6, your bindings are going to be ready on the method $onInit and not before.

If you need to re-enable auto bindings https://toddmotto.com/angular-1-6-is-here#re-enabling-auto-bindings

like image 71
ThibaudL Avatar answered Oct 28 '22 11:10

ThibaudL