ng-show无法使用Firebase身份验证响应

时间:2017-09-09 08:37:37

标签: angularjs firebase firebase-authentication

我正在将Firebase与网络平台一起使用,并且我正在尝试验证新用户是否在操作成功与否时单击按钮并显示和引导警报(使用ng-show)。

不知何故,第一次点击时警报没有显示,第二次点击按钮时显示警告。

我不知道是否与问题有关,但Firebase会在操作成功或不成功时发出http POST请求,这可能会阻止ng-show显示。顺便说一句,我尝试使用$http的POST请求到某个网址,它确实显示了警告,因此它可能与Firebase有关。

例如,这是操作成功时的POST请求: XHR finished loading: POST "https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=AIzaSyDq8jT_hORoFwefcApBXgiOAYQufpOvI9A".

这是一个非常奇怪的问题,我不知道我该怎么做才能解决它。 我认为它可能是Angular上的一个错误,我试图将角度版本从1.3切换到1.6并且没有任何改变。

以下是我的代码中的一些部分,如果这可以帮助某种方式:

myApp.controller('secondController', ['$scope', function($scope){

$scope.register = function(){

    firebase.auth().createUserWithEmailAndPassword('john@example.com','123321').then( (user) => {

        console.log(user);
        $scope.alertShow = true;  // not shown on first click
        $scope.errorMessage = user.email;
        console.log($scope.errorMessage);

    }).catch(function(error) {
        console.log(error.message);
        $scope.alertShow = true;
        $scope.errorMessage = error.message;
        console.log($scope.errorMessage);
    })

}

}]);

HTML:

 <button class="btn btn-primary" ng-click="register()">Register</button>

    <div class="alert alert-danger" role="alert" ng-show="alertShow">
        {{ errorMessage }}
    </div>

1 个答案:

答案 0 :(得分:1)

尝试使用ng-if代替ng-show。作为ng-if动态添加和删除dom元素,它将使消化循环变得非常简单。

  <button class="btn btn-primary" ng-click="register()">Register</button>

        <div class="alert alert-danger" role="alert" ng-if="alertShow">
            {{ errorMessage }}
        </div>

如果即使不行 - 如果不起作用,请尝试$apply来触发$digest周期。

myApp.controller('secondController', ['$scope','$timeout' function($scope,$timeout){

$scope.register = function(){
 firebase.auth().createUserWithEmailAndPassword('john@example.com','123321').then( (user) => {

        console.log(user);
        $scope.alertShow = true;  // not shown on first click
        $timeout(function (){$scope.$apply()},0);
        $scope.errorMessage = user.email;
        console.log($scope.errorMessage);

    }).catch(function(error) {
        console.log(error.message);
        $scope.alertShow = true;
         $timeout(function (){$scope.$apply()},0);
        $scope.errorMessage = error.message;
        console.log($scope.errorMessage);
    })

}

}]);