参考Thinkster.io Tutorial,(注意:截至目前,该教程适用于AngularFire v0.7.0,我正在尝试将代码更新为AngularFire v0.8.0)< / em>的
我正在尝试加载当前登录用户创建的帖子和评论。 帖子已成功加载,但评论不是。
基本上,firebase结构有两个实体----&gt;帖子和用户
我正在从用户A登录。共创建了三个用户,只有用户A发帖并在同一帖子上发表了评论。
在下面找一下Firebase Forge结构(如果您有了这个想法,可以跳过这个。)
{
"posts" : {
"-JVSUl0lw7FI5CBKmxh0" : {
"comments" : {
"-JVSUnzHVuoh48LZ0jU_" : {
"postId" : "-JVSUl0lw7FI5CBKmxh0",
"text" : "First Comment!",
"username" : "User A"
}
},
"owner" : "User A",
"title" : "First Post",
"url" : "http://url-1.com"
}
},
"users" : {
"User A" : {
".priority" : "simplelogin:72",
"comments" : {
"-JVSUnzHVuoh48LZ0jU_" : {
"-JVSUqOA94On0xjmBnCT" : {
"id" : "-JVSUnzHVuoh48LZ0jU_",
"postId" : "-JVSUl0lw7FI5CBKmxh0"
}
}
},
"md5_hash" : "d10ca8d11301c2f4993ac2279ce4b930",
"posts" : {
"-JVSUl0lw7FI5CBKmxh0" : "-JVSUl0lw7FI5CBKmxh0"
},
"username" : "User A"
},
"User B" : {
".priority" : "simplelogin:73",
"md5_hash" : "2076105f6efe7c11e285add95f514b9a",
"username" : "User B"
},
"User C" : {
".priority" : "simplelogin:74",
"md5_hash" : "a6d14de05d7b2c3cf4fae7ae14cfa7f3",
"username" : "User C"
}
}
}
用于将用户A发布的帖子和评论加载到他的个人资料中的代码写在名为 profile.js
的控制器中为了清晰起见,在代码中添加了注释。如果不舒服,请忽略。
'use strict';
app.controller('ProfileCtrl',
function ($firebase, FIREBASE_URL, $scope, $routeParams, Post, User) {
$scope.user = User.findByUsername($routeParams.username);
$scope.commentedPosts = {};
$scope.user.$loaded( function () {
populatePosts();
populateComments();
});
function populatePosts () {
$scope.posts = {};
angular.forEach($scope.user.posts, function(postId) {
console.log("The value for postId is: "+postId); //Console: 'The value for postId is: -JVSUl0lw7FI5CBKmxh0'
$scope.posts[postId] = Post.find(postId);
});
}
function populateComments () {
$scope.comments = {};
var postsref = new Firebase(FIREBASE_URL + 'posts');
angular.forEach($scope.user.comments, function(comment) {
console.log("comment.postId is : "+comment.postId); // Console: 'comment.postId is : undefined'
//Hard Coding postId works fine.
//var post = Post.find("-JVSUl0lw7FI5CBKmxh0");
var post = Post.find(comment.postId); // See Error Log at the bottom or
// See commented code (hardcoded) which works without giving errors.
post.$loaded().then(function() {
//Hard Coding postId and id (id is for comment Id)
//Using this line of code gets the Data correctly from the Firebase 0.8.0
//$scope.comments[comment.id] = $firebase(postsref.child("-JVSUl0lw7FI5CBKmxh0").child('comments').child("-JVSUnzHVuoh48LZ0jU_")).$asObject();
//$scope.comments[comment.id] = post.$child('comments').$child(comment.id);
//Bellow is the New code For Firebase 0.8.0 - as $child is now not supported in newer API
$scope.comments[comment.id] = $firebase(postsref.child("comment.postId").child('comments').child(comment.id)).$asObject();
// Clueless on how to change the bellow line of code to work with Firebase 0.8.0
$scope.commentedPosts[comment.postId] = post;
});
});
}
});
调用的支持服务方法编号如下:
User.findByUsername
var ref = new Firebase(FIREBASE_URL + 'users');
...
findByUsername: function(username){
if(username){
//return usersdiv.$getRecord(username);
return $firebase(ref.child(username)).$asObject();
}
},
Post.find
var postsref = new Firebase(FIREBASE_URL + 'posts');
...
find: function (postId) {
console.log("find method: ");
console.log("postId is: "+postId);
return $firebase(postsref.child(postId)).$asObject();
},
控制台错误日志:
Error: Firebase.child failed: First argument was an invalid path: "undefined". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"
at Error (native)
at Ia (http://localhost:9000/bower_components/firebase/firebase.js:14:283)
at D.E.H (http://localhost:9000/bower_components/firebase/firebase.js:146:216)
at Object.Post.find (http://localhost:9000/scripts/services/post.js:29:34)
at http://localhost:9000/scripts/controllers/profile.js:33:25
at Object.forEach (http://localhost:9000/bower_components/angular/angular.js:330:20)
at populateComments (http://localhost:9000/scripts/controllers/profile.js:28:15)
at http://localhost:9000/scripts/controllers/profile.js:11:7
at wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:11319:81)
at http://localhost:9000/bower_components/angular/angular.js:11405:26