如何使用angularfire將輸入與firebase中的用戶相關聯？

Question

我已經構建了一個帶有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>

Answer 1

有幾件事讓你沮喪。

$firebase 和 $firebaseAuth 之間的差異

AngularFire 0.9由兩個主要綁定組成： $firebaseAuth和$firebase 。 $firebaseAuth綁定用於所有身份驗證。 $firebase綁定用於將Firebase中的數據同步為對象或數組。

里面的UpdateFirebaseWithString你調用$asArray()在$firebaseAuth 。 此方法屬於$firebase綁定。

何時調用 $asArray()

當您在UpdateFirebaseWithString函數內調用$asArray ，您將在UpdateFirebaseWithString調用函數時創建綁定並同步數組。 你應該在函數之外創建它，而不是這樣做，所以它只創建了一個項目。

甚至比這更好，您可以將綁定和$asArray函數的創建抽象到工廠中。

Plunker演示

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 = "";
  }

}]);

如何使用angularfire將輸入與firebase中的用戶相關聯？

問題描述

1 個解決方案

解決方案1
5 已采納 2014-11-25 13:10:18

如何使用angularfire將輸入與firebase中的用戶相關聯？

問題描述

1 個解決方案

解決方案1 5 已采納 2014-11-25 13:10:18

解決方案1
5 已采納 2014-11-25 13:10:18