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?

Community · Accepted Answer · 2017-05-23 12:07:11Z

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, 2017 at 12:07

CommunityBot

11 silver badge

answered Nov 23, 2016 at 11:19

Igor

62.5k10 gold badges111 silver badges181 bronze badges

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

2 Comments

Igor Over a year ago

@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 Over a year ago

@pkyo - found it, I updated my answer to include it at the end.

SURJEET SINGH Bisht · Accepted Answer · 2016-11-23 11:22:48Z

0

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

answered Nov 23, 2016 at 11:22

SURJEET SINGH Bisht

88110 silver badges16 bronze badges

Collectives™ on Stack Overflow

Cannot access a controller function inside $http.get method

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related