在第二个表单提交之前，不会显示angularjs消息绑定 [英] angularjs message binding doesn't show until second form submit

问题描述

我正在编写我的第一个angularjs应用程序，并开始有意义。不过，我有一个注册表单，在某些情况下不会收到消息来提醒用户出现问题。我正在使用Firebase进行身份验证，工作正常。但我通过一个唯一的用户名作为密钥存储用户。因此，在我运行 $ createUser 函数之前，我会快速查询是否已经有用户对象，如果没有，我创建用户。

问题是当有这个用户名的现有用户。控制台日志值打印的很好，但错误消息（绑定到 $ scope.authMsg ）不会显示在第一次 - 但如果我点击注册按钮，然后消息显示在预期的消息分区。

有关邮件问题的任何提示（或者对此代码的建议）将不胜感激！

  $ scope.register = function（）{
 $ scope.authMsg =''; 
 var ref = new Firebase（FIREBASE_URL）; 
 $ scope.authObj = $ firebaseAuth（ref）; 
 $ b $ //检查用户名是否为
 ref.child（/ users /+ $ scope.account.username）.on（value，function（snapshot）{
 if（snapshot.val（））{
 // 
 //问题在这里!! 
 // 
 $ scope.authMsg ='用户名存在 - 你忘记密码？'; //直到第二次提交才显示在页面
 console.log（'用户名存在 - 你忘记了密码吗？'）; //打印到控制台，如预期的那样
 $ {
 $ 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）{
 //我们创建编辑用户，现在登录 - 商店用户信息
 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）; 
 //保存用户数据
 usersRef.set（userdata）; 
 console.log（登录为：，authData.uid）; 
 $ state.go（'app.dashboard'）; 
}）。catch（function（error）{
 $ scope.authMsg = error; 
 console.error（Error：，error）; 
}）; 
} 
}，function（errorObject）{
 $ scope.authMsg ='读取失败：'+ errorObject.code; 
 console.log（'读取失败：'+ errorObject.code）; 
}）; 
}; 
  

解决方案

我假设，Firebase回调不涉及一个角度的摘要周期。

要处理这个，写

  if （snapshot.val（））{
 $ scope。$ apply（function（）{
 $ scope.authMsg ='用户名存在 - 你忘记了密码吗？'; 
}）; 
  

有关这个主题的有用阅读： http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

I'm writing my first angularjs app, and it's beginning to make sense. However, I have a sign up form that isn't getting the messages in some cases to alert users to problems. I'm using Firebase to authenticate, which works fine. But I'm storing users by a unique username as the key. So before I run the $createUser function, I do a quick query to see if there's already a user object with this key-- if not, I create the user.

The problem is when there is an existing user with this username. The console log value prints fine, but the error message (bound to $scope.authMsg) doesn't show up the first time-- but if I click the "register" button again, then the message shows up in the expected message div.

Any hints on the message issue (or suggestions for this code) would be appreciated!

$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);
    });
};

解决方案

I'm assuming, the Firebase callback does not involve an angular digest cycle.

To handle this, write

if (snapshot.val()) {
    $scope.$apply(function() {
        $scope.authMsg = 'Username exists— did you forget your password?';
    });

A useful reading about the topic: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

这篇关于在第二个表单提交之前，不会显示angularjs消息绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！