Cannot access a controller function inside $http.get method

Question

This is my controller:

var app = angular.module('myApp', [ 'ngMaterial' ]);
app.controller('searchController',['$scope','$http',function($scope,$http) {
    this.selectedItemChange = function(item) {
        $http.get("url").then(function(response) {
            this.initializeProfiles();
        });
    }
    this.initializeProfiles = function() {}
}

But I am getting the error TypeError: this.initializeProfiles is not a function.

How do I access initializeProfiles() inside the .then of $http.get?

score 3 · Accepted Answer · edited May 23 '17 at 12:07

3

You need a reference to the control from inside the callback, create one before you execute the call to the http.get.

var app = angular.module('myApp', [ 'ngMaterial' ]);
app.controller('searchController',['$scope','$http',function($scope,$http) {
    this.selectedItemChange = function(item) {
    var me = this; // me = this
    $http.get("url")
        .then(function(response){
            me.initializeProfiles(); // me
    });
    }
    this.initializeProfiles = function() {}
}

See this excelent SO answer for a guide to how this is defined in javascript: How does the "this" keyword in Javascript act within an object literal?.

edited May 23 '17 at 12:07

Community

1
1

answered Nov 23 '16 at 11:19

Igor

55,253
10
80
149

@pkyo - it has to do with `this`, the reference changes depending on the call stack and is not implicitly captured in a callback. There is a very good SO answer explaining all the details of `this`, give me a minute and I will find it. – Igor Nov 23 '16 at 11:23
@pkyo - found it, I updated my answer to include it at the end. – Igor Nov 23 '16 at 11:30

score 0 · Answer 2 · answered Nov 23 '16 at 11:22

  var app = angular.module('myApp', [ 'ngMaterial' ]);
  app.controller('searchController',['$scope','$http',function($scope,$http) {
   var vm = this;
  vm.selectedItemChange = function(item) {
  $http.get("url")
    .then(function(response){
        vm.initializeProfiles();
   });
}
   vm.initializeProfiles = function() {}
}

Cannot access a controller function inside $http.get method

2 Answers2