Amazoom
Amazoom

Reputation: 661

AngularJS Promise does not run a digest

I am new to promise concepts and I'm facing a problem while I'm trying to submit a login form.

When the promise is resolved, I want to update the UI by changing the value of a scope variable.

Here is the controller method which is called

 $ctrl.loginForm = function(isValid) {
    // check to make sure the form is completely valid

    if (isValid) {
      LoginService.login($ctrl.user).then(function (value) {
          $ctrl.loginError = false;
          var cookie = value.token;
      }, function (reason) {
          $ctrl.loginError = true;

      });
    }

  };

and here is my service method

  service.login = function(credentials) {
    return new Promise((resolve, reject) => {
      $http.post(AppConst.Settings.apiUrl + 'api-token-auth/',credentials).success((data) => {
        resolve(data);
      }).error((err, status) => {
        reject(err, status);
      });
    });
  };

So once the promise is resolved the $ctrl.loginError in the controller changes its value but it does not update on the UI.

I've tried with $apply and it works, but I don't understand why I must use $apply! I thought that the digest cycle starts by default!

Am I doing something wrong?

Upvotes: 0

Views: 416

Answers (1)

Denys Reshetniak
Denys Reshetniak

Reputation: 382

$http methods return you a promise which is a $q service. So, problem is that you use native promise wrapper which doesn't tell angular's scope to run $apply method. Change your service to following

service.login = function(credentials) {
  return $http.post(AppConst.Settings.apiUrl + 'api-token-auth/',credentials);
};

Upvotes: 0

Related Questions