AngularJS - Firebase resetPassword更改不會反映

請參閱下面的HTML/Javascript：輸入不正確的電子郵件地址，然後提交表單後，錯誤消息不會顯示給用戶，但是，如果我們嘗試將附加字符附加到退出條目然後消息出現在屏幕上。在調試中，變量$ scope.fError爲true，並且$ scope.fErrorMessage具有正確的文本，但是，如上所述，它不會顯示在屏幕上。AngularJS - Firebase resetPassword更改不會反映

.controller('PasswordCtrl', ['$scope', '$location', 'CommonProp', function ($scope, $location, CommonProp) { 
 
     $scope.forgotpassword = function(e) { 
 
      e.preventDefault(); 
 
      var firebaseObj = new Firebase(CommonProp.getFirebaseURL()); 
 
      login.loading = true; 
 
      if ($scope.passwordForm.$valid) { 
 
       firebaseObj.resetPassword({ 
 
        email: $scope.user.emailaddress 
 
       }, function(error) { 
 
        if (error) { 
 
         $scope.fError = true; 
 
         if (error.code == "INVALID_USER") { 
 
          $scope.fErrorMessage = "The specified user account does not exist."; 
 
         } else { 
 
          $scope.fErrorMessage = "Error resetting password:"; 
 
         } 
 
        } else { 
 
         $scope.fErrorMessage = "Password reset email sent successfully!"; 
 
        } 
 
       }); 
 
      } 
 
     }; 
 

 
    var login = {}; 
 
    $scope.login = login; 
 

 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <link rel="icon" href="http://getbootstrap.com/favicon.ico"> 
 

 
    <title>AngularJS & Firebase Web App</title> 
 
    <script src="https://code.jquery.com/jquery-2.0.1.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-route.min.js"></script> 
 
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet"> 
 

 
    <link href="https://getbootstrap.com/examples/justified-nav/justified-nav.css" rel="stylesheet"> 
 
    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script> 
 
    <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
    <script src="forgotpassword/forgotpassword.js"></script> 
 
</head> 
 

 
<body ng-controller="PasswordCtrl"> 
 

 
    <div class="container"> 
 
     <div class="jumbotron" style="padding-bottom:0"> 
 
      <h2>Password reset.</h2> 
 
     </div> 
 
     <form class="form-signin" name="passwordForm"> 
 
      <div class="form-group" ng-class="{ 'has-error' : passwordForm.emailaddress.$invalid }"> 
 
       <input type="email" name="emailaddress" placeholder="Email Address" class="form-control" ng-model="user.emailaddress"> 
 
       <p ng-show="passwordForm.emailaddress.$invalid">Enter a valid email.</p> 
 
       <p style="color: red;" ng-show="fError">{{fErrorMessage}}</p> 
 
      </div> 
 
      <button type="button" ladda-loading="login.loading" data-style="expand-right" ng-click="forgotpassword($event);" ng-disabled="!user.emailaddress" class="btn btn-lg segoe-ui-light ladda-button btn-primary btn-block"><span class="ladda-label">Reset</span></button> 
 
     </form> 
 

 
    </div> 
 

 
</body> 
 
</html>

來源

2015-12-28 TechTurtle

嘗試包裝分配$ scope.fError = true;在$ scope。$ apply。請參閱https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply –

謝謝。喜歡這個？如果（$ scope.passwordForm。$ valid）{firefoxObj.resetPassword（{0} scope.user.emailaddress }，function（error）{ $ scope。$ apply（function（）{ if（error） { $ scope.fError = true; if（error.code ==「INVALID_USER」）{ $ scope.fErrorMessage =「指定的用戶帳號 – TechTurtle

它以上述方式使用$ scope.apply後正在工作 – TechTurtle

密碼的實際復位異步進行的（因爲它的火力地堡服務器上完成）。一旦操作完成，你的回調函數被調用。但是在那個時候，AngularJS不知道你對$scope做出了什麼改變。該解決方案（如@OleksandrPapchenko在他的評論中提到的）講述的變化AngularJS，通過調用$apply()或使其成爲$timeout調用內部：

firebaseObj.resetPassword({ 
    email: $scope.user.emailaddress 
}, function(error) { 
    $timeout(function() { 
     if (error) {    
      $scope.fError = true; 
      if (error.code == "INVALID_USER") { 
       $scope.fErrorMessage = "The specified user account does not exist."; 
      } else { 
       $scope.fErrorMessage = "Error resetting password:"; 
      } 
     } else { 
      $scope.fErrorMessage = "Password reset email sent successfully!"; 
     } 
    }); 
});

這確保了AngularJS「看到」這是作出改變到$scope並在其下一個更新週期中更新UI。

請注意，Firebase已爲AngularJS創建了一個名爲AngularFire的綁定庫，該庫爲您處理此類配管。你可能想考慮使用它。

來源

2015-12-28 15:43:31

謝謝不過，我已經添加了AngularFireJS的參考（第三名），請參閱HTML。此外，超時示例仍然不起作用 - 我複製了整個塊，因爲它是任何想法？ – TechTurtle

AngularJS - Firebase resetPassword更改不會反映

回答

相關問題