Question

我的目的是在用户登录后更新导航栏。基本上，它应该在登录后立即将Login更改为Hi, {{usr.username}} 但是，登录后它不会更新，我必须再次单击Login来触发更改。但是，在控制台中，登录后会立即记录用户信息。

在index.html中，代码的一部分如下：

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

其中$scope.loggedIn初始化为false，$scope.usr初始化为null。我正在使用firebase进行身份验证：

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);
    }
});

在控制台中，我$scope.loggedIn为真，但$scope.usr为空。

我使用authWithPassword()功能的方法有误或者我可以强制更新更新吗？

Answer 1

请在更改$scope.$digest()值后立即致电$scope.usr。无论如何，请注意您调用Firebase以使用户是异步的，因此在调用之后我不会放置相关代码，而是在回调中。

Answer 2

如果$scope对象的任何更改都在其$digest循环之外完成，则AngularJS不会更新视图。

但不用担心，Firebase是一款非常受欢迎的工具，它拥有AngularJS服务。它被称为 AngularFire ，您应该使用它而不是全局Firebase对象。

所以你的代码将类似于：

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);
});

了解更多in the documentation of AngularFire

Answer 3

调用$ scope。$ apply（）;

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

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

});

AngularJS在值更改后不会更新

3 个答案: