Question

请参阅下面的HTML / Javascript：输入错误的电子邮件地址然后提交表单后，错误消息不会显示给用户，但是，如果我们尝试将其他字符附加到退出的条目，则消息会显示在屏幕上。在debug中，变量$ scope.fError为true，$ scope.fErrorMessage具有正确的文本，但是，如上所述，它不会显示在屏幕上。

＆＃13;

.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;

}]);

＆＃13;

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

＆＃13;

Answer 1

密码的实际重置是异步发生的（因为它是在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＆＃34;看到＆＃34;对$scope所做的更改，并在下一个更新周期中更新UI。

请注意，Firebase已为AngularJS创建了一个名为AngularFire的绑定库，它会为您处理此类管道。您可能需要考虑使用它。

AngularJS - Firebase resetPassword更改未得到反映

1 个答案: