angularjs - 为什么我的 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

如果您在回调函数中更新作用域，AngularJS 不会意识到该更新。这意味着它不会更新 View 。因此，虽然数据更新了，但 View 却没有更新。这也是为什么当您再次单击(或以其他方式强制刷新 View )时，数据会显示出来。

解决方案是通过调用 $timeout() 或 $apply() 显式告诉 AngularJS 它需要刷新 View 。

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

如果您使用标准绑定(bind)库:AngularFire，许多此类情况都会自动处理。