CODEWITHSUNDEEP
angularjsfirebaseangularfire
Bones and Teeth
Bones and Teeth

Reputation: 381

AngularJS does not update after value change

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?

Upvotes: 1

Views: 1753

Answers (3)

Ismail Rubad
Ismail Rubad

Reputation: 1468

Call $scope.$apply();

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

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

});

Upvotes: 0

Michał Miszczyszyn
Michał Miszczyszyn

Reputation: 12701

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

Upvotes: 3

tomericco
tomericco

Reputation: 1584

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.

Upvotes: 3

Related Questions