AngularJS - Firebase resetPassword 更改没有得到反映答案

【问题标题】：AngularJS - Firebase resetPassword changes not getting reflectedAngularJS - Firebase resetPassword 更改没有得到反映
【发布时间】：2015-12-28 14:39:09
【问题描述】：

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

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

【问题讨论】：

尝试包装分配 $scope.fError = true;在 $scope.$apply 中。见docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply
谢谢。像这样？ if ($scope.passwordForm.$valid) { firebaseObj.resetPassword({ email: $scope.user.emailaddress }, function (error) { $scope.$apply(function () { if (error) { $scope.fError = true; if (error.code == "INVALID_USER") { $scope.fErrorMessage = "指定的用户帐号
以上述方式使用 $scope.apply 后它正在工作。

标签： javascript angularjs firebase

【解决方案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 “看到”对 $scope 所做的更改，并在其下一个更新周期更新 UI。

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

【讨论】：

谢谢弗兰克。但是，我添加了对 AngularFireJS 的引用（倒数第三个）。请参阅 HTML。此外，超时示例仍然不起作用 - 我照原样复制了整个块。有什么想法吗？