gpt4 book ai didi

javascript - 如何使用 angularfire 将输入与 firebase 中的用户相关联?

转载 作者:塔克拉玛干 更新时间:2023-11-02 23:04:37 25 4
gpt4 key购买 nike

我用 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>

还假设,上述依赖项,下面的工作提交一个想法,但问题仍然在于如何将其与用户相关联。请参阅此处的代码笔: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>

最佳答案

有几件事让您感到困惑。

之间的区别 $firebase $firebaseAuth

AngularFire 0.9 由两个主要绑定(bind)组成:$firebaseAuth$firebase$firebaseAuth 绑定(bind)用于所有身份验证。 $firebase 绑定(bind)用于将来自 Firebase 的数据同步为对象或数组。

UpdateFirebaseWithString 中,您正在调用 $firebaseAuth 上的 $asArray()。此方法属于 $firebase 绑定(bind)。

何时调用 $asArray()

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

更好的是,您可以将绑定(bind)的创建和 $asArray 函数抽象到工厂中。

Plunker Demo

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

在 Controller 调用之前获取用户

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

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

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

将用户与其数据相关联

现在我们在 Controller 调用之前就已经有了用户,我们可以轻松地将他们的 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 = "";
}

}]);

关于javascript - 如何使用 angularfire 将输入与 firebase 中的用户相关联?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27084186/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com