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

问题描述

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

在 index.html 中，部分代码如下所示:

登录
<div class="item" ng-show="loggedIn">{{usr.username}}</div>

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

FirebaseRef.authWithPassword({电子邮件":电子邮件，密码":密码}，功能(错误，authData){如果(错误){console.log('登录失败！', 错误);} 别的 {console.log('验证成功，有效负载:', authData);FirebaseRef.child("users").child(authData.uid).once('value', function(dataSnapshot) {$scope.usr = dataSnapshot.val();});$scope.loggedIn = true;控制台日志($scope.usr)；console.log($scope.loggedIn);}});

在控制台中，我将 $scope.loggedIn 设为 true，但将 $scope.usr 设为 null.

我使用 authWithPassword() 函数的方式是否错误，或者我可以强制更新更改吗?

解决方案

如果对 $scope 对象的任何更改在其 $digest<之外完成，AngularJS 将不会更新视图/code> 循环.

但不用担心，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

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