Angular $http function scope inside controller

Question

I'm having a problem trying to use "this" with angular functions (specifically $http.get) inside a controller.

Example:

Javascript- (psuedo code)

...
.controller('testController')
{
   $http.get(data)
  {
     this.Stuff = data;
  }
}
...

HTML-

<div ng-controller='testController as test'>
{{test.Stuff}}
</div>

When trying to access test.Stuff in the html, it is empty.

I understand that there is a scope issue, but shouldn't I be able to access the controller's 'this' inside of the $http function?

Steven Wexler · Accepted Answer · 2014-07-17 17:05:38Z

6

You'll notice that this inside of your success callback refers to window (the global object). Your success callback is being called with window as the context because functions that are not members of other functions are invoked with the window object as the context for the function. If you want this to refer to your controller instance you must bind that context to the function. You can use angular.bind to accomplish this.

.controller('testController')
{
   $http.get(data).success(angular.bind(this, function(data) {
     this.Stuff = data;
  }));
}

edited Jul 17, 2014 at 17:05

answered Jul 17, 2014 at 16:53

Steven Wexler

17.5k8 gold badges59 silver badges83 bronze badges

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

1 Comment

Rob Over a year ago

Did you test this? 1. you need to add data as the callback parameter 2. you need to add another closing parentheses 3. i couldn't get this to work.

lucuma · Accepted Answer · 2014-07-17 16:50:23Z

0

Try it this way:

controller('testController')
{
   var self = this;

   $http.get(data)
  {
     self.Stuff = data;
  }
}

I typically use the scope like this:

.controller('testController', function($scope) {
{
   $http.get(data)
  {
     $scope.Stuff = data;
  }
})

answered Jul 17, 2014 at 16:50

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

2 Comments

Axschech Over a year ago

I've already used both and know they both work. thank you for your suggestion but it doesn't really answer my question. I understand that 'this' changes insides $http, but I'm trying to understand why it would since $http's scope should be inside the outer controller scope.

lucuma Over a year ago

Have you put a breakpoint inside the $http callback to see what this references. I bet it references the $http service or window and not the controller.

Rob · Accepted Answer · 2014-07-17 16:53:44Z

0

Assign the data to your scope in the http callback like so:

app.controller('testController',function($scope,$http) {
    $http.get(url).success(function(response) {
        $scope.stuff = response;
    });
});

answered Jul 17, 2014 at 16:53

Rob

1,8502 gold badges12 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular $http function scope inside controller

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related