angularjs 消息绑定直到第二个表单提交才显示
angularjs message binding doesn't show until second form submit
我正在编写我的第一个 angularjs 应用程序,它开始变得有意义了。但是,我有一个注册表单,在某些情况下没有收到消息来提醒用户注意问题。我正在使用 Firebase 进行身份验证,效果很好。但是我通过一个唯一的用户名作为密钥来存储用户。因此,在我运行 $createUser
函数之前,我进行了一次快速查询,以查看是否已经存在具有此键的用户对象——如果没有,我将创建该用户。
问题是当现有用户使用此用户名时。控制台日志值打印正常,但错误消息(绑定到 $scope.authMsg
)第一次没有显示——但如果我再次单击 "register" 按钮,则消息显示在预期消息 div。
任何有关消息问题的提示(或对此代码的建议)将不胜感激!
$scope.register = function() {
$scope.authMsg = '';
var ref = new Firebase(FIREBASE_URL);
$scope.authObj = $firebaseAuth(ref);
// check if the username is taken
ref.child("/users/"+$scope.account.username).on("value", function(snapshot) {
if (snapshot.val()) {
//
// PROBLEM HERE!!
//
$scope.authMsg = 'Username exists-- did you forget your password?'; // doesn't show on page until second submit
console.log('Username exists-- did you forget your password?'); // prints to console as expected
} else {
$scope.authObj.$createUser({ email: $scope.account.email, password: $scope.account.password })
.then(function(userData) {
console.dir(userData);
return $scope.authObj.$authWithPassword({
email: $scope.account.email,
password: $scope.account.password
});
}).then(function(authData) {
// we created a user and are now logged in-- store user info
var userdata = {};
userdata[$scope.account.username] = {
uid: authData.uid,
first_name: $scope.account.first_name,
last_name: $scope.account.last_name,
email: $scope.account.email,
full_name: $scope.account.first_name+' '+$scope.account.last_name
};
var usersRef = ref.child("users");
// save the userdata
usersRef.set(userdata);
console.log("Logged in as:", authData.uid);
$state.go('app.dashboard');
}).catch(function(error) {
$scope.authMsg = error;
console.error("Error: ", error);
});
}
}, function (errorObject) {
$scope.authMsg = 'The read failed: ' + errorObject.code;
console.log('The read failed: ' + errorObject.code);
});
};
我假设,Firebase 回调不涉及 angular 摘要周期。
要处理这个问题,写
if (snapshot.val()) {
$scope.$apply(function() {
$scope.authMsg = 'Username exists— did you forget your password?';
});
有关该主题的有用读物:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
我正在编写我的第一个 angularjs 应用程序,它开始变得有意义了。但是,我有一个注册表单,在某些情况下没有收到消息来提醒用户注意问题。我正在使用 Firebase 进行身份验证,效果很好。但是我通过一个唯一的用户名作为密钥来存储用户。因此,在我运行 $createUser
函数之前,我进行了一次快速查询,以查看是否已经存在具有此键的用户对象——如果没有,我将创建该用户。
问题是当现有用户使用此用户名时。控制台日志值打印正常,但错误消息(绑定到 $scope.authMsg
)第一次没有显示——但如果我再次单击 "register" 按钮,则消息显示在预期消息 div。
任何有关消息问题的提示(或对此代码的建议)将不胜感激!
$scope.register = function() {
$scope.authMsg = '';
var ref = new Firebase(FIREBASE_URL);
$scope.authObj = $firebaseAuth(ref);
// check if the username is taken
ref.child("/users/"+$scope.account.username).on("value", function(snapshot) {
if (snapshot.val()) {
//
// PROBLEM HERE!!
//
$scope.authMsg = 'Username exists-- did you forget your password?'; // doesn't show on page until second submit
console.log('Username exists-- did you forget your password?'); // prints to console as expected
} else {
$scope.authObj.$createUser({ email: $scope.account.email, password: $scope.account.password })
.then(function(userData) {
console.dir(userData);
return $scope.authObj.$authWithPassword({
email: $scope.account.email,
password: $scope.account.password
});
}).then(function(authData) {
// we created a user and are now logged in-- store user info
var userdata = {};
userdata[$scope.account.username] = {
uid: authData.uid,
first_name: $scope.account.first_name,
last_name: $scope.account.last_name,
email: $scope.account.email,
full_name: $scope.account.first_name+' '+$scope.account.last_name
};
var usersRef = ref.child("users");
// save the userdata
usersRef.set(userdata);
console.log("Logged in as:", authData.uid);
$state.go('app.dashboard');
}).catch(function(error) {
$scope.authMsg = error;
console.error("Error: ", error);
});
}
}, function (errorObject) {
$scope.authMsg = 'The read failed: ' + errorObject.code;
console.log('The read failed: ' + errorObject.code);
});
};
我假设,Firebase 回调不涉及 angular 摘要周期。
要处理这个问题,写
if (snapshot.val()) {
$scope.$apply(function() {
$scope.authMsg = 'Username exists— did you forget your password?';
});
有关该主题的有用读物:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html