我正在使用AngularJS和Firebase登录页面。到目前为止,我的大部分代码都运行正常,直到我尝试添加通知。当ng-show表明他们应该这样做时,似乎不会显示。它需要两次点击才能工作,绝不应该这样。 截至目前,我有以下按钮。
<button ng-click="cna()" type="button" class="btn btn-success ban block" style="width:50%">Create New Account</button>
cna()函数是Create New Account函数。这看起来像:
create($scope.email, $scope.password);
create()方法如下所示:
function create(email, password) {
firebase.auth().createUserWithEmailAndPassword(email,password).catch(function(error){
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode+":"+errorMessage);
$scope.failure = true;
$scope.success = false;
});
firebase.auth().onAuthStateChanged(function(user){
if(user){
$scope.success = true;
$scope.failure = false;
}else{}
});
}
最后,当$ scope.success或$ scope.failure设置为true时,我有两个通知应该显示。但是,这仅适用于第二次单击,因为它应该失败。所以,我的问题是我的帐户正在创建,但直到第二次点击我的GUI才会收到通知。根本不应该再次点击它才能工作。
最后,我的通知代码如下:
<div class="alert alert-success" ng-show="success"><strong>Success!</strong> You made an account!</div>
<div class="alert alert-danger" ng-show="failure"><strong>Sorry!</strong> This user already exists...</div>
我看过所有的网页,到目前为止,我发现的所有东西都叫做AngularFire,这可能是一个不错的选择,但我不确定。如果有人能帮助我解决我的问题,我真的很感激!
答案 0 :(得分:2)
如果更新回调函数中的范围,AngularJS不知道该更新。这意味着它不会更新视图。因此,在更新数据时,视图不会更新。这也是为什么当您再次点击(或以其他方式强制刷新视图)时,数据会显示出来。
解决方案是明确告诉AngularJS需要通过调用$timeout()
或$apply()
来刷新视图。
function create(email, password) {
firebase.auth().createUserWithEmailAndPassword(email,password).catch(function(error){ $timeout(function() {
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode+":"+errorMessage);
$scope.failure = true;
$scope.success = false;
})});
firebase.auth().onAuthStateChanged(function(user){
if(user){
$timeout(function() {
$scope.success = true;
$scope.failure = false;
});
}else{}
});
}
如果您使用标准绑定库,会自动处理很多这类案例:AngularFire。
答案 1 :(得分:0)
如果您在第一次点击后没有看到任何消息(是吗?),请尝试将成功功能添加到您的承诺中:
function create(email, password) {
firebase.auth().createUserWithEmailAndPassword(email,password).then(function () {
// you may want to add some condition here
$scope.success = true;
}, function(error){
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode+":"+errorMessage);
$scope.failure = true;
});
firebase.auth().onAuthStateChanged(function(user){
if(user){
$scope.success = true;
$scope.failure = false;
}else{}
});
}