AngularJS范围更新需要双击按钮

Question

>Controller：

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

作为参考，这两个函数通过单击按钮运行（如果表单有效）。 如何使错误位在初始单击时运行，而不必运行该函数两次？

Answer 1

我通过将$scope更新包装在timeout（）函数中来解决此问题。