如果对 $scope 对象的任何更改在其 $digest 循环.

但不用担心，Firebase 是一款非常流行的工具，它提供了 AngularJS 服务.它称为 AngularFire，您应该使用它而不是全局 Firebase 对象.

因此您的代码将类似于:

var auth = $firebaseAuth(FirebaseRef);auth.$authWithPassword({电子邮件:电子邮件，密码:密码}).then(函数(authData){console.log('验证成功，有效负载:', authData);var sync = $firebase(FirebaseRef.child("users").child(authData.uid));var syncObject = sync.$asObject();syncObject.$bindTo($scope, "usr");}).catch(函数(错误){console.error('登录失败！', error);});

在 AngularFire 文档中阅读更多

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?

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