控制器:
// Modal Controller
app.controller("ModalCtrl", ["$scope", "$filter", function($scope, $filter) {
var date = new Date();
var currentDate = $filter('date')(new Date(), 'MM/dd/yyyy');
// Form Submit Actions
$scope.submitFormCreateAccount = function() {
$('#form-create-account').form('submit');
};
$scope.submitFormSignIn = function() {
$('#form-sign-in').form('submit');
};
// Form Validation - Create Account
$('#form-create-account').form({
on: 'blur',
fields: {
email: {
identifier: 'email',
rules: [{
type: 'email',
prompt: 'Please enter a valid email address.'
}]
},
displayName: {
identifier: 'displayName',
rules: [{
type: 'empty',
prompt: 'Please enter a display name for yourself.'
}]
},
password: {
identifier: 'password',
rules: [{
type: 'empty',
prompt: 'Please enter a password'
},{
type: 'length[6]',
prompt: 'Password needs to be atleast 6 characters long'
}]
},
passwordConfirm: {
identifier: 'passwordConfirm',
rules: [{
type: 'match[password]',
prompt: 'Password don\'t match'
}]
}
},
onSuccess: function() {
createUser();
return false;
},
onFailure: function() {
return false;
}
});
// Form Validation - Sign In
$('#form-sign-in').form({
on: 'blur',
fields: {
email: {
identifier: 'emailSignIn',
rules: [{
type: 'email',
prompt: 'Please enter a valid email address.'
}]
},
password: {
identifier: 'passwordSignIn',
rules: [{
type : 'empty',
prompt : 'Please enter a password.'
}]
}
},
onSuccess: function() {
signInUser();
return false;
},
onFailure: function() {
// Fail Function
return false;
}
});
// Create User
function createUser() {
email = $scope.createUserEmail;
displayName = $scope.createUserDisplayName;
password = $scope.createUserPassword;
auth.createUserWithEmailAndPassword(email, password)
.then(function(firebaseUser) {
userId = firebaseUser.uid;
// Add user to RealtimeDB
database.ref('users/' + userId).set({
name: displayName,
email: email,
added: currentDate
});
$('.ui.modal').modal("hide");
}).catch(function(error) {
console.log(error);
$scope.modalErrorMessage = true;
$scope.errorMessage = error;
});
};
// Sign In User
function signInUser() {
email = $scope.signInUserEmail;
password = $scope.signInUserPassword;
auth.signInWithEmailAndPassword(email, password).then(function(value) {
$('.ui.modal').modal("hide");
})
.catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode == 'auth/invalid-email') {
console.log(errorMessage);
$scope.modalErrorMessage = true;
$scope.errorMessage = errorMessage;
} else {
console.log(errorMessage);
$scope.modalErrorMessage = true;
$scope.errorMessage = errorMessage;
}
});
}
// Sign Out User
$scope.signOutUser = function() {
auth.signOut().then(function() {
}, function(error) {
console.log(error);
});
}
}]);
查看:
<div class="ui warning message modal-message"
ng-show="modalErrorMessage">
<div class="header">
Whoops!
</div>
<p>{{errorMessage}}</p>
</div>
一切正常,但是当createUser()或signInUser()函数运行时,除非上述函数被激活两次,否则该位不会运行:
}).catch(function(error) {
console.log(error);
$scope.modalErrorMessage = true;
$scope.errorMessage = error;
});
作为参考,这两个函数是通过单击按钮运行的(如果表单有效)。如何使错误位在初始单击时运行而不必运行该函数两次?
答案 0 :(得分:0)
我通过将$ scope更新包装在timeout()函数中来修复此问题。