I am writing angularjs app in 1.6.x... and I am having issues with ponent() where $onInit() can not see any var defined...

every var is undefined

here is my code..

angular.module('carFilter', []).
        ponent('carFilter', {
            controller: function (carFactory, $http) {
                this.service = carFactory; 
                this.updatedObj = {};
//when i put breakpoint here on chrome, i can see the factory obj.. but..
//when it goes to oninit, init can not see this obj



            this.$onInit = function () {
                    this.testing = 'a';
                    console.log(this.service); //th

                    loadFilter().then(function (result) {

                    updateFilter(result)
                });
            };

            function loadFilter() {
               //$http here to return promise 
            }
            function updateFilter(responseData) {
               //using response data to update i wanted to update the this.updatedObj
               this.updatedObj = responseData;
//but here, when this function is triggered, every object is undefined...
//I tried to put this.sercie and this.updatedObj in $onInit(), but it was still getting UNDEINFED.... 
//it could not see this.testing either...
//how can i update object in the controller??
            }
       },
       templateUrl: 'someURL'
});

thank you in advance...

I am writing angularjs app in 1.6.x... and I am having issues with ponent() where $onInit() can not see any var defined...

every var is undefined

here is my code..

angular.module('carFilter', []).
        ponent('carFilter', {
            controller: function (carFactory, $http) {
                this.service = carFactory; 
                this.updatedObj = {};
//when i put breakpoint here on chrome, i can see the factory obj.. but..
//when it goes to oninit, init can not see this obj



            this.$onInit = function () {
                    this.testing = 'a';
                    console.log(this.service); //th

                    loadFilter().then(function (result) {

                    updateFilter(result)
                });
            };

            function loadFilter() {
               //$http here to return promise 
            }
            function updateFilter(responseData) {
               //using response data to update i wanted to update the this.updatedObj
               this.updatedObj = responseData;
//but here, when this function is triggered, every object is undefined...
//I tried to put this.sercie and this.updatedObj in $onInit(), but it was still getting UNDEINFED.... 
//it could not see this.testing either...
//how can i update object in the controller??
            }
       },
       templateUrl: 'someURL'
});

thank you in advance...

• javascript
• angularjs
• ponents

Share Improve this question Follow asked Mar 14, 2017 at 17:39 RedARedA 7333 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

When you enter the $onInit function(){}, this now refers to the $onInit, so it bees an issue of allowing the variable this from the controller to be passed in.

I know a lot of people declare vm or ctrl depending on who you learned it from on the first line of your controller.

i.e.

var ctrl = this;
ctrl.service = carFactory;

ctrl.$onInit = function() {
    console.log(ctrl.service);
}

With Angular 1.6, variables defined outside a method in a controller are ignored. You should also define all methods on the object this in the controller.

angular.module('carFilter', []).
    ponent('carFilter', {
        controller: function (carFactory, $http) {
            this.$onInit = function () {
                this.service = carFactory; 
                this.updatedObj = {};
                this.testing = 'a';
                console.log(this.service);

                this.loadFilter().then(function (result) {
                    this.updateFilter(result)
                }.bind(this);
            };

            this.loadFilter = function() {
               //$http here to return promise 
            };

            this.updateFilter = function (responseData) {            
                this.updatedObj = responseData;
            };
        },
        templateUrl: 'someURL'
   });

In a function this references whichever object invokes the function, which isn't necessarily your ponent.

To make sure your this object in $onInit references your ponent you can either bind it explicitly to the ponent this:

this.$onInit = function () {
    ...
};
this.$onInit.bind(this);

or set a variable to your ponent's this and access it in $onInit using closure:

var vm = this;

this.$onInit = function () {
    vm.testing = 'a';
    console.log(vm.service); //th

    loadFilter().then(function (result) {
        updateFilter(result)
    });
};

The same goes for your updateFilter function.