使用AngularFire v0.8.0将帖子和评论加载到用户的个人资料

时间:2014-08-28 17:48:55

标签: javascript angularjs angularjs-scope firebase angularfire

参考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 

0 个答案:

没有答案