AngularJS值变化后不更新 [英] AngularJS does not update after value change

问题描述

我的目的是更新用户登录后的导航栏。基本上，它应该改变登录到{{​​} usr.username} 后立即登录。结果
但是，它不会在登录后更新，我必须点击登录再次触发的变化。然而，在控制台中，用户的信息是在登录后立即登录。

在的index.html中，code的部分看起来像：

 ＆LT; D​​IV CLASS =项NG点击=loginmodal（）NG隐藏=的loggedIn＆GT;登录上述＆lt; / DIV＆GT;
＆LT; D​​IV CLASS =项NG-秀=的loggedIn＆GT;您好：{{usr.username}}＆LT; / DIV＆GT;
 

其中， $ scope.loggedIn 作为虚假和 $ scope.usr 为空初始化。我使用的火力点进行验证：

  FirebaseRef.authWithPassword（{
    电子邮件：电子邮件，
    密码：密码
}，功能（错误的authData）{
    如果（错误）{
        的console.log（'登录失败！，错误）;
    }其他{
        的console.log（'有效载荷成功验证：，的authData）;
        FirebaseRef.child（用户）。子女（authData.uid）。一旦（'值'，函数（dataSnapshot）{
            $ scope.usr = dataSnapshot.val（）;
        }）;        $ scope.loggedIn =真;        的console.log（$ scope.usr）;
        的console.log（$ scope.loggedIn）;
    }
}）;
 

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

我如何使用 authWithPassword（）函数难道错了或者我可以强制要更新的变化？

解决方案

AngularJS不会，如果到 $范围对象的任何更改之外完成的更新视图其 $摘要循环。

但不担心，火力地堡是它有一个AngularJS服务如此受欢迎的工具。这就是所谓的 AngularFire 的，你应该使用它而不是全局火力地堡对象。

所以你的code将类似于：

  VAR AUTH = $ firebaseAuth（FirebaseRef）;
AUTH。$ authWithPassword（{
    电子邮件：电子邮件，
    密码：密码
}），然后（功能（的authData）{
    的console.log（'有效载荷成功验证：，的authData）;
    VAR同步= $火力点（。FirebaseRef.child（用户）子（authData.uid））;
    VAR syncObject = $同步asObject（）。
    。syncObject $ bindTo（$范围，USR）;
}）赶上（功能（错误）{
    console.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

这篇关于AngularJS值变化后不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！