如何使用angularfire将输入与firebase中的用户相关联？答案

【问题标题】：How to associate an input with a user in firebase using angularfire?如何使用angularfire将输入与firebase中的用户相关联？
【发布时间】：2014-11-23 00:33:47
【问题描述】：

我已经使用 firebase 构建了一个应用程序，它可以登录用户并获得他们的 id，但我不知道如何将它与提交字符串的用户结合起来。

在此处查看代码笔：http://codepen.io/chriscruz/pen/OPPeLg

HTML 下面：

<html ng-app="fluttrApp">
<head>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.0.2/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
</head>

<body ng-controller="fluttrCtrl">
<button ng-click="auth.$authWithOAuthPopup('google')">Login with Google</button>
<li>Welcome, {{user.google.displayName }}</li>
<button ng-click="auth.$unauth()">Logout with Google</button>

<input ng-submit= "UpdateFirebaseWithString()" ng-model="string" ></input>

下面的Javascript：

<script>
var app = angular.module("fluttrApp", ["firebase"]);
app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
var ref = new Firebase("https://crowdfluttr.firebaseio.com/");
return $firebaseAuth(ref);
}]);

app.controller("fluttrCtrl", ["$scope", "Auth", function($scope, Auth) {
 $scope.auth = Auth;
 $scope.user = $scope.auth.$getAuth();


$scope.UpdateFirebaseWithString = function () {
          url = "https://crowdfluttr.firebaseio.com/ideas"
          var ref = new Firebase(url);
          var sync = $firebaseAuth(ref);
          $scope.ideas = sync.$asArray();   
              $scope.ideas.$add({
                  idea: $scope.string,
                  userId:$scope.user.google.id,
          });
         }; 
      }])

</script>
</body>


</html>

同样假设，上述依赖项，下面的作品提交一个想法，但问题仍然存在于如何将其与用户相关联。请在此处查看 codepen：http://codepen.io/chriscruz/pen/raaENR

<body ng-controller="fluttrCtrl">

    <form ng-submit="addIdea()">
        <input ng-model="title">
    </form>

  <script>

var app = angular.module("fluttrApp", ["firebase"]);

app.controller("fluttrCtrl", function($scope, $firebase) {
  var ref = new Firebase("https://crowdfluttr.firebaseio.com/ideas");
  var sync = $firebase(ref);
 $scope.ideas = sync.$asArray();


    $scope.addIdea = function() {
        $scope.ideas.$add(
          {
            "title": $scope.title, 
          }
          );

        $scope.title = '';
    };


});

  </script>



  </body>

【问题讨论】：

标签： javascript angularjs firebase angularfire

【解决方案1】：

有几件事让你绊倒。

$firebase和$firebaseAuth之间的区别

AngularFire 0.9 由两个主要绑定组成：$firebaseAuth 和 $firebase。 $firebaseAuth 绑定用于所有事物的身份验证。 $firebase 绑定用于将您的数据从 Firebase 同步为对象或数组。

在UpdateFirebaseWithString 内部，您在$firebaseAuth 上调用$asArray()。此方法属于 $firebase 绑定。

何时致电 $asArray()

当您在UpdateFirebaseWithString 函数内调用$asArray 时，您将在每次调用该函数时创建绑定并同步数组。而不是这样做，您应该在函数之外创建它，因此它只创建一个项目。

比这更好的是，您可以将绑定和$asArray 函数的创建抽象到工厂中。

Plunker Demo

app.factory("Ideas", ["$firebase", "Ref", function($firebase, Ref) {
  var childRef = Ref.child('ideas');
  return $firebase(childRef).$asArray();
}]);

在控制器调用之前获取用户

从$getAuth 获取用户是正确的想法。这是一个同步方法，应用程序将阻塞，直到用户返回。现在，您需要在每个控制器中获取用户。通过在应用程序的 run 函数中检索用户，您可以让您的生活更轻松。在run 函数内部，我们可以注入$rootScope 和自定义Auth 工厂并将用户附加到$rootScope。这样，用户将可用于所有控制器（除非您在控制器内部覆盖 $scope.user）。

app.run(["$rootScope", "Auth", function($rootScope, Auth) {
  $rootScope.user = Auth.$getAuth();
}]);

这是一个不错的方法，但如前所述，$scope.users 可以被覆盖。更好的方法是从路由解析到用户。 AngularFire 指南中有一个很棒的部分。

将用户与其数据相关联

现在我们在控制器调用之前已经有了用户，我们可以轻松地将他们的 id 与他们的输入关联起来。

app.controller("fluttrCtrl", ["$scope", "Ideas", function($scope, Ideas) {
    $scope.ideas = Ideas;
    $scope.idea = "";

    $scope.UpdateFirebaseWithString = function () {     
      $scope.ideas.$add({
        idea: $scope.idea,
         userId: $scope.user.google.id,
      }).then(function(ref) {
        clearIdea();
      });
    };

  function clearIdea() {
    $scope.idea = "";
  }

}]);

【讨论】：