AngularJS-Firebase重置密码更改未得到反映

AngularJS - Firebase resetPassword changes not getting reflected

本文关键字：密码 AngularJS-Firebase      更新时间：2023-09-26

请参阅下面的HTML/Javascript：在输入错误的电子邮件地址并提交表单后，错误消息不会显示给用户，但是，如果我们试图在退出的条目中添加额外的字符，则消息会出现在屏幕上。在调试中，变量$scope.fError为true，$scope.f ErrorMessage具有正确的文本，但是，如abvoe所述，它不会显示在屏幕上。

.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>

密码的实际重置是异步进行的（因为它是在Firebase服务器上完成的）。操作完成后，将调用回调函数。但在这一点上，AngularJS不再知道您对$scope所做的任何更改。解决方案是（正如@OleksandrPapchenko在评论中提到的那样）通过调用$apply()或在$timeout调用中进行，将更改告知AngularJS

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的绑定库，它为您处理这种类型的管道。您可能需要考虑使用它。

相关文章：