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 New Account函数。这看起来像：

    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不知道该更新。这意味着它不会更新视图。因此，在更新数据时，视图不会更新。这也是为什么当您再次点击（或以其他方式强制刷新视图）时，数据会显示出来。

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

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。

Answer 2

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

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

为什么我的Angular的ng-show通话仅在第二次点击时使用Firebase进行更新？

2 个答案: