Angular 1.6 bindings inside controller

Question

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.

score 9 · Accepted Answer · answered Dec 25 '16 at 17:29

9

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

answered Dec 25 '16 at 17:29

ThibaudL

999
9
16

Thank you so much! – Dave Plug Dec 25 '16 at 17:41

score 0 · Answer 2 · answered Mar 26 '20 at 20:11

If anyone still searching for solution, use $onInit method provided by angular.

            this.$onInit = function () {
            $http.get(`/api/v1/projects`).then((res) => {
                $scope.projects = res.data;
            }, (err) => {
                $scope.error = err
            })
        };

Angular 1.6 bindings inside controller

2 Answers2