AngularJS does not update after value change

Question

My intention is to update the navigation bar after the user login. Basically, it should change Login to Hi, {{usr.username}} right after the login.
However, it does not update after logging in and I have to click on Login again to trigger the change. However, in the console, the user info is logged right after the login.

In the index.html, the part of the code looks like:

<div class="item" ng-click="loginmodal()" ng-hide="loggedIn">Log in</div>
<div class="item" ng-show="loggedIn">Hi, {{usr.username}}</div>

where $scope.loggedIn is initialized as false and $scope.usr as null. I am using firebase for authentication:

FirebaseRef.authWithPassword({
    "email"    : email,
    "password" : password
}, function(error, authData) {
    if (error) {
        console.log('Login Failed!', error);
    } else {
        console.log('Authenticated successfully with payload:', authData);
        FirebaseRef.child("users").child(authData.uid).once('value', function(dataSnapshot) {
            $scope.usr = dataSnapshot.val();
        });

        $scope.loggedIn = true;

        console.log($scope.usr);
        console.log($scope.loggedIn);
    }
});

In console, I have $scope.loggedIn as true, but have $scope.usras null.

Is it wrong how I am using the authWithPassword() function or can I force the change to be updated?

I thinks the $scope.user is in another scope, try use a service to update this value. — Bazinga
– Bazinga, Commented Nov 19, 2014 at 8:55
As @Miszy says, you should use AngularFire's $firebaseAuth service, which handles updates to the scope for you. See firebase.com/docs/web/libraries/angular/… — Frank van Puffelen
– Frank van Puffelen, Commented Nov 19, 2014 at 12:32

Michał Miszczyszyn · Accepted Answer · 2014-11-19 09:19:44Z

3

AngularJS won't update the view if any changes to the $scope object are done outside of its $digest loop.

But worry not, Firebase is such a popular tool it has a AngularJS service. It's called AngularFire and you should be using it instead of global Firebase object.

So your code will be something similar to:

var auth = $firebaseAuth(FirebaseRef);
auth.$authWithPassword({
    email: email,
    password: password
}).then(function (authData) {
    console.log('Authenticated successfully with payload:', authData);
    var sync = $firebase(FirebaseRef.child("users").child(authData.uid));
    var syncObject = sync.$asObject();
    syncObject.$bindTo($scope, "usr");
}).catch(function (error) {
    console.error('Login Failed!', error);
});

Read more in the documentation of AngularFire

answered Nov 19, 2014 at 9:19

Michał Miszczyszyn

12.8k2 gold badges38 silver badges53 bronze badges

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

Comments

tomericco · Accepted Answer · 2014-11-19 08:59:58Z

3

Try calling $scope.$digest() right after changing $scope.usr value. Anyway, notice that you call to Firebase to get the user is asynchronous, so I wouldn't put dependent code after this call, but inside the callback.

answered Nov 19, 2014 at 8:59

tomericco

1,6143 gold badges22 silver badges31 bronze badges

1 Comment

Bones and Teeth Over a year ago

I tried $digest and $apply. Neither worked....It works fine now. I am using AngularFire.

Ismail Rubad · Accepted Answer · 2017-04-23 08:26:16Z

0

Call $scope.$apply();

FirebaseRef.child("users").child(authData.uid).once('value', function(dataSnapshot) {

   $scope.$apply(function(){
      $scope.usr = dataSnapshot.val();
   });

});

answered Apr 23, 2017 at 8:26

Ismail Rubad

1,4782 gold badges13 silver badges27 bronze badges

Collectives™ on Stack Overflow

AngularJS does not update after value change

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related