ng-show不適用於Firebase身份驗證響應

Question

我正在使用Firebase與網絡平臺，並且我試圖驗證新用戶單擊按鈕並在操作成功時顯示引導警報（使用ng-show）或不。

不知何故，警報不會顯示在第一次點擊，並顯示在第二次點擊按鈕。

我不知道這個問題是否與問題有關，但是當動作成功或失敗時，Firebase發出一個http POST請求，也許這個動作會阻止顯示ng-show。順便說一句，我嘗試POST POST請求$http到一些網址，它確實顯示了警報，所以它可能與Firebase有關。

例如，這是POST請求時動作成功： XHR finished loading: POST "https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=AIzaSyDq8jT_hORoFwefcApBXgiOAYQufpOvI9A".

這是非常奇怪的問題，我不知道我能做些什麼來解決這個問題。 我認爲這可能是Angular上的一個bug，我試圖將角度版本從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> 

Answer 1

嘗試ng-if而不是ng-show。由於ng-if動態地添加和刪除dom元素，它會修飾digest循環。

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

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

如果連NG-如果沒有作品，嘗試$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); 
    }) 

} 

}]);