AngularJS 从控制器调用 Firebase uid答案

【问题标题】：AngularJS call Firebase uid from controllerAngularJS 从控制器调用 Firebase uid
【发布时间】：2014-10-13 12:36:11
【问题描述】：

我正在尝试验证用户是否已登录。最初我使用了 $scope.use、$scope.user.uid、$scope.getCurrenUser()，如 Firebase 文档中所述，但我认为我只是将依赖项弄错了。

代码： myApp.js https://gist.github.com/sebbe605/2b9ff7d3b798a58a3886

firebase.js https://gist.github.com/sebbe605/f9e7b9a75590b3938524

如果我理解正确，则程序无法知道我指的是 Firebase 用户。为了澄清我希望.controller('templateCtrl',function($scope, $firebase) 能够在用户登录时显示某个按钮。

--更新 1-- 所以，我已经更新了我的文件，据我所知，这应该可以工作。以前的代码和上面的 gits 一样，以增强混乱。

myApp.js

    angular.module('myApp', [
    'ngRoute',
    'firebase'
])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/template',
            {
                templateUrl:'partials/template.html', controller:'templateCtrl'
            });
        $routeProvider
            .when('/login',
            {
                templateUrl:'partials/login.html', controller:'signupCtrl'
            });
        $routeProvider
            .when('/signup',
            {
                templateUrl:'partials/signup.html', controller:'signupCtrl'
            });
        $routeProvider
            .when('/user',
            {
                templateUrl:'partials/user.html', controller:'userCtrl'
            });
        $routeProvider
            .otherwise('/template');
    }])

controllers.js

'use strict';
angular.module('myApp').controller('signupCtrl', function($scope, $http, angularFire, angularFireAuth){
    $scope.loginBusy = false;
    $scope.userData = $scope.userData || {};

    var ref = new Firebase('https://boostme.firebaseio.com/');
    angularFireAuth.initialize(ref, {scope: $scope, name: 'user'});

    /*//////////////LOGIN - LOGOUT - REGISTER////////////////////*/

    $scope.loginEmailText = "Email"
    $scope.loginPasswordText = "Password"

    $scope.login = function() {
        $scope.loginMessage = "";
        if ((angular.isDefined($scope.loginEmail) && $scope.loginEmail != "") && (angular.isDefined($scope.loginPassword) && $scope.loginPassword != "")) {
            $scope.loginBusy = true;
            angularFireAuth.login('password', {
                email: $scope.loginEmail,
                password: $scope.loginPassword
            });
        } else {
            $scope.loginPassword = ""
            $scope.loginPasswordText = "Incorrect email or password"
        }
    };

    $scope.logout = function() {
        $scope.loginBusy = true;
        $scope.loginMessage = "";
        $scope.greeting = "";
        $scope.disassociateUserData();
        $scope.userData = {};
        angularFireAuth.logout();
    };

    $scope.emailText = "Email"
    $scope.passwordText = "Password"
    $scope.confirmPasswordText = "Confirm Password"

    $scope.register = function() {
        $scope.loginMessage = "";
        if ((angular.isDefined($scope.email) && $scope.email != "") && (angular.isDefined($scope.password0) && $scope.password0 != "" && $scope.password0 == $scope.password1)) {
            $scope.loginBusy = true;
            angularFireAuth.createUser($scope.email, $scope.password0, function(err, user) {
                if (user) {
                    console.log('New User Registered');
                }
                $scope.loginBusy = false;
            });
        } else  {
            $scope.password0 =""
            $scope.password1 =""
            $scope.passwordText = "Password Not Matching"
            $scope.confirmPasswordText = "Password Not Matching"
        }
    };

    $scope.$on('angularFireAuth:login', function(evt, user) {
        $scope.loginBusy = false;
        $scope.user = user;
        console.log("User is Logged In");
        angularFire(ref.child('users/' + $scope.user.id), $scope, 'userData').then(function(disassociate) {
            $scope.userData.name = $scope.userData.name || {};
            if (!$scope.userData.name.first) {
                $scope.greeting = "Hello!";
            } else {
                $scope.greeting = "Hello, " + $scope.userData.name.first + "!";
            }
            $scope.disassociateUserData = function() {
                disassociate();
            };
        });
    });

    $scope.$on('angularFireAuth:logout', function(evt) {
        $scope.loginBusy = false;
        $scope.user = {};
        console.log('User is Logged Out');
    });

    $scope.$on('angularFireAuth:error', function(evt, err) {
        $scope.greeting = "";
        $scope.loginBusy = false;
        $scope.loginMessage = "";
        console.log('Error: ' + err.code);
        switch(err.code) {
            case 'EMAIL_TAKEN':
                $scope.loginMessage = "That email address is already registered!";
                break;
            case 'INVALID_PASSWORD':
                $scope.loginMessage = "Invalid username + password";
        }
    });
})

输出：

Error: [$injector:unpr] Unknown provider: angularFireProvider <- angularFire
http://errors.angularjs.org/1.3.0-rc.3/$injector/unpr?p0=angularFireProvider%20%3C-%20angularFire
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:80:12
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:3938:19
    at Object.getService [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4071:39)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:3943:45
    at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4071:39)
    at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4103:13)
    at Object.instantiate (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:4123:23)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:7771:28
    at link (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js:938:26)
    at invokeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js:7549:9) <div ng-view="" class="ng-scope">
  (anonymous function)  angular.js:10683
  (anonymous function)  angular.js:7858
  invokeLinkFn  angular.js:7551
  nodeLinkFn    angular.js:7069
  compositeLinkFn   angular.js:6441
  publicLinkFn  angular.js:6320
  boundTranscludeFn angular.js:6461
  controllersBoundTransclude    angular.js:7096
  update    angular-route.js:896
  Scope.$broadcast  angular.js:13751
  (anonymous function)  angular-route.js:579
  processQueue  angular.js:12234
  (anonymous function)  angular.js:12250
  Scope.$eval   angular.js:13436
  Scope.$digest angular.js:13248
  Scope.$apply  angular.js:13540
  done  angular.js:8884
  completeRequest   angular.js:9099
  xhr.onreadystatechange    angular.js:9038

我无法弄清楚问题是什么。但是我认为有什么问题：但我不能说。如果需要更多信息，我很乐意发布。

【问题讨论】：

我只是将用户绑定到$scope.auth = $firebaseSimpleLogin(new Firebase(FBURL)); 然后<div ng-show="auth.user"> 的范围。请参阅github.com/puf/trenches/blob/master/app.js#L10 并进一步了解。
我不确定我是否把事情复杂化了。也许我应该看看 angularfire-seed？
可能是，但我只是自己滚动。我在上面链接的（当前）137 行 JavaScript 是一个功能齐全的 Firebase 应用程序。如果 angularfire-seed 更长，请随意从我的开始（并从中删除自定义指令）。
他们确实有github.com/firebase/angularfire-seed/blob/master/app/js/… 我想我可以通过一些小的修改来接受它。不过，我不确定我将如何做到这一点。
最好的方法是行之有效的方法。 :-) 了解您复制/粘贴的代码很重要，除非您想依赖原始创建者的帮助意愿/可用性。我认为你最大的问题是你在考虑代码优先而不是视图优先，因为角度似乎更喜欢。

标签： javascript angularjs firebase angularfire firebasesimplelogin

【解决方案1】：

我最初采用与您处理特权操作相同的 if-then-else 方法。但事实证明，这不是使用 Angular 时的最佳方法。与其采用这种 if-then-else 方法，不如尝试将问题重构为隔离特权代码的解决方案。

如果用户已登录，则显示某个按钮

所以您最初的问题是关于仅在用户登录时才显示 HTML 元素，这很容易在您的控制器中使用类似这样的东西：

$scope.auth = $firebaseSimpleLogin(new Firebase(FBURL));

这一行将 Firebase 登录状态绑定到当前范围，使其可用于视图。不需要 if-then-else，因为始终存在登录状态。 AngularFire 确保视图在状态发生变化时得到通知，所以我们要做的就是确保我们有 HTML 标记来处理经过身份验证的用户的存在和不存在：

<div ng-controller="TrenchesCtrl" class='auth'>
    <div ng-show="auth.user">
        <p>You are logged in as <i class='fa fa-{{auth.user.provider}}'></i> {{auth.user.displayName}}</p>
        <button ng-click="auth.$logout()">Logout</button>
    </div>
    <div ng-hide="auth.user">
        <p>Welcome, please log in.</p>
        <button ng-click="auth.$login('twitter')">Login with <i class='fa fa-twitter'> Twitter</i></button>
        <button ng-click="auth.$login('github')">Login with <i class='fa fa-github'> GitHub</i></button>
    </div>
</div>

看到它读起来几乎像 if-then-else 吗？但是没有我编写代码来尝试检测用户是否登录。这一切都由 AngularJS 和 AngularFire 以声明方式处理。

仅在用户登录时执行操作

当您确实需要执行特权操作时，我发现像这样隔离代码最容易：

function updateCard(id, update) {
    var auth = $firebaseSimpleLogin(new Firebase(FBURL));
    auth.$getCurrentUser().then(function(user) {
        update.owned_by = user.username;
        var sync = $firebase(ref.child('cards').child(id));
        sync.$update(update);
    });
};

请注意，这些是来自my Trenches app (demo) 的（简化的）片段，我写这些片段是为了了解有关 Angular 和 AngularFire 的更多信息。

【讨论】：