值更改后 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);});
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.usr
as 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屋!