Why is vm not binding to this?

Question

function ExampleCtrl(HttpGet){
  'ngInject';

  const vm = this;
  vm.title = 'test';


  HttpGet.get().then(function(response){
    console.log(vm.title); //logs 'test';
    vm.response = response.data;
    console.log(vm.response); //logs the response;

  });

}

export  default {
  name : 'ExampleCrl',
  fn : ExampleCtrl
};

My View:

{{ home.response }}

UI Router:

  $stateProvider
  .state('Home', {
    url : '/home/:page',
    controller : 'ExampleCtrl as home',
    templateUrl: 'home.html',
    title : 'Home'
  });

HttpGet Service:

function HttpGet($http) {
  'ngInject';

  const service = {};

  service.get = function () {
    return new Promise(function(resolve, reject) {
      $http.get('http://localhost:8000/all').success((data) => {
        resolve(data);
      }).error((err, status) => {
        reject(err, status);
      });
    });
  };

  return service;

}

export default {
  name: 'HttpGet',
  fn: HttpGet
};

Isn't the whole point of doing vm=this is that inside a function block this is still bound ?

Try using `let` instead of `const`. Provide [mcve] that shows problem — charlietfl, Jun 12 '16 at 01:05
Still too many unknowns. Haven't clarified if request is even succeeding — charlietfl, Jun 12 '16 at 01:13
on the surface, there doesn't seem to be anything wrong with this code, but you haven't provided a working example; for instance, that `get()` function is empty in your example. — Claies, Jun 12 '16 at 01:14
if I `console.log(vm)` inside `then` callback, I am able to see the result. Not sure why wouldn't it bind — Deepankar Bajpeyi, Jun 12 '16 at 01:18
@Makoto Yup. I am able to see the result there. Just updated the question with my service — Deepankar Bajpeyi, Jun 12 '16 at 01:22
Just return `$http.get('http://localhost:8000/all')` from your `service.get` function. First, it is [Promise antipattern](http://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it). Second: you leave angular's digest cycle this way. So your view isn't updated. — Ruslan Stelmachenko, Jun 12 '16 at 01:22
@djxak. But I am not sure if that's the problem, I am still able to see my results inside the `then` callback. Outside `then` everything is binding fine. Whatever is inside `then` doesn't bind — Deepankar Bajpeyi, Jun 12 '16 at 01:25
That's the problem. `$http.get` already returns the promise, so you don't need to wrap it into another promise. And if you still did, then call angular's digest manually using `$scope.apply(function() {resolve(data);});` Also I see you use ES2015 features. Why not then use `=>` syntax and you not need `vm=this` at all? — Ruslan Stelmachenko, Jun 12 '16 at 01:29
@djxak. That worked well!!. Thanks a lot for that. Yes, I am using => functions everywhere now and I don't need a separate outer scope. — Deepankar Bajpeyi, Jun 12 '16 at 01:36

score 2 · Accepted Answer · answered Jun 12 '16 at 01:41

Your problem is not binding this. It is working fine.

Your problem is that you leave angular's digest cycle, so your html view is not updating.

  service.get = function () {
    return new Promise(function(resolve, reject) {
      $http.get('http://localhost:8000/all').success((data) => {
        resolve(data);
      }).error((err, status) => {
        reject(err, status);
      });
    });
  };

Here you creating new promise and call it's resolve function. But it is native ES6 promise. When it's then handler called, it is already outside of angular digest cycle.

So you should call ditest manually using

      $http.get('http://localhost:8000/all').success((data) => {
        $scope.$apply(() => resolve(data)); 
      }).error((err, status) => {

But you can solve this even simpler because $http.get already returns a promise. Just do:

  service.get = function () {
    return $http.get('http://localhost:8000/all');
  };

And that's all. $http.get already call digest for you.

And if you ever really need to create a promise in your angular code, then please use angular's $q service instead of ES6 promises because it already takes digest cycle into account.

Why is vm not binding to this?

1 Answers1