为什么我的 Angular 的 ng-show 调用只会在使用 Firebase 的第二次点击时更新？

Question

我正在使用 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($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 的东西，它可能是一个不错的选择，但我不确定。如果有人能帮我解决我的问题，我将不胜感激！

Answer 1

如果您在第一次点击后没有看到任何消息（是吗？），请尝试将成功功能添加到您的承诺中：

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

Answer 2

如果您在回调函数中更新范围，AngularJS 不会意识到该更新。这意味着它不会更新视图。因此，当数据更新时，视图不会。这也是为什么当您再次单击（或以其他方式强制刷新视图）时，数据会显示出来的原因。

解决方案是通过调用$timeout() 或$apply() 来明确告诉AngularJS 它需要刷新视图。

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，很多此类情况都会自动处理。