Question

我正在使用Firebase的Simple Login作为博客格式网站的管理员登录信息。正确的电子邮件和pw组合提供对Firebase上的数据库的写访问权限。根据文档，我创建了单独的块。

auth var：

var chatRef = new Firebase('https://fiery-fire-291.firebaseio.com/');

var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
    if (error) {
        // an error occurred while attempting login
        console.log(error);
    } else if (user) {
        // user authenticated with Firebase
        console.log('User ID: ' + user.id + ', Provider: ' + user.provider);
    } else {
    // user is logged out
    }
});

身份验证登录，我已将其包含在登录控制器中：

app.controller('LoginCtrl', function ($scope) {
    $scope.login = function() {
        auth.login('password', {
            email: $scope.loginEmail,
            password: $scope.loginPassword, 
            debug: true 
        });
    };
});

从登录表单中获取数据：

<div ng-controller="LoginCtrl">
    <form ng-submit="login()">
        <fieldset ng-class="">
            <input type="email" ng-model="loginEmail">
            <input type="password" ng-model="loginPassword">
        </fieldset>
        <button type="submit" href="#">Login</button>
    </form>
</div>

将登录表单的ng-class设置为错误的正确/最佳方法是什么？在Firebase登录错误时向用户显示错误？

我觉得我不应该在Angular中设置CSS（我可以在错误回调中轻松完成）。我已经尝试在回调中设置一个全局var，它将被

选中

ng-class="{error: !userAuthenticated}"

但除了不工作之外，我觉得这也是错误的。

Answer 1

这里最简单的方法是将错误写入回调中的$scope。您需要通过调用$ apply或$ timeout来提醒Angular start a compile：

var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
    $timeout(function() {
       if (error) {
           $scope.error = error;
       } else if (user) {
           $scope.error = null;
       } else {
          $scope.error = 'user is logged out';
       }
    });
});

在您的页面中显示：

<p class="error" ng-show="error">{{error}}</p>

通过使用Angular + Firebase开发的就地工具，您可以节省大量精力：Angular+Firebase Quick Start，angularFire library，angularfire-seed

angularFire-seed包含一个完整的功能登录示例，包括错误处理，您也可以参考。

Answer 2

我对Angular一点都不熟悉，但看过Firebase文档我相信回调是完全你是不是想要这样做，它就是它的用途。来自文档：

auth.createUser(email, password, function(error, user) {
  if (!error) {
    console.log('User Id: ' + user.id + ', Email: ' + user.email);
  }
});

如果你想从控制器中取出CSS本身，那么我建议你看一下this snippet on Coderwall，它不仅可以通过类名而是通过对象来设置ng-class +表达。然后，您可以根据错误回调中的要求设置控制ng-class的给定布尔值，并且角度模板将相应地更新，但您没有将类设置“混入”到控制器代码中。

如何在Firebase简单登录电子邮件密码上显示错误密码的错误状态

2 个答案: