【问题标题】:TypeError: undefined is not a function while submitting & deleting post using AngularFire and AngularJS (ThinksterIO Tutorial Chapter 7)TypeError: undefined is not a function while submit & delete post using AngularFire and AngularJS (ThinksterIO Tutorial Chapter 7)
【发布时间】:2014-09-05 19:37:20
【问题描述】:

我在 Thinkster.io AngularJS Tutorial:Learn to build Modern Webapps Chapter 7. Creating your own user data using firebase 中遇到了多个 TypeError,因为在 AngularFire 升级到 v0.8.0 后该教程已经过时了。特别是 .$child().$on() 方法已被取出。这是更改日志

https://github.com/firebase/angularfire/releases/tag/v0.8.0

getting help solving my initial TypeError issues 注册新用户后,我开始看到提交帖子和尝试删除帖子时出现 2 个新的 TypeErrors。罪魁祸首又是过时的 .$child().$on() 方法。

提交帖子 > TypeError: undefined is not a function

提交帖子后,我看到控制台中显示以下 TypeError

此 TypeError 指向 post.js 服务

TypeError: undefined is not a function
    at http://localhost:9000/scripts/services/post.js:16:11

这是 $child 方法调用开头的第 16 行第 11 列。另外,请注意第一个之后的第二个.&child()。这将导致另一个 TypeError。

return posts.$add(post).then(function(ref) {
  var postId = ref.name();
  user.$child('posts').$child(postId).$set(postId);
  return postId;
});

我会提到,即使我收到此 TypeError,我仍然能够成功创建帖子,并且我在 Forge 和应用程序的帖子列表中看到它。

删除帖子 > TypeError: undefined is not a function

当我尝试删除刚刚创建的帖子时,我收到另一个与现已弃用的 .$on() 方法相关的 TypeError。

TypeError: undefined is not a function
    at Object.Post [as delete] (http://localhost:9000/scripts/services/post.js:27:10)
    at Scope.$scope.deletePost (http://localhost:9000/scripts/controllers/posts.js:10:14)

它指向 post.js 服务中此代码中的 .$on()

delete: function(postId) {
  if(User.signedIn()) {
    var post = Post.find(postId);
    post.$on('loaded', function(){
      var user = User.findByUsername(post.owner);
      posts.$remove(postId).then(function(){
        user.$child('posts').$remove(postId);
      });
    });
  }
}

我意识到我将不得不做类似的事情

post.$loaded(function(result) {Chapter 7. Creating your own user data using firebase
  // something related to finding user of post
  // remove post from posts collection 
  // but of course we can't use .$child()
});

但问题是,当像我这样的 JS 初学者遇到 AngularFire 更改日志和 API 时,我会迷失方向,不知所措,直至关闭。一如既往地非常感谢任何指导。


文件


post.js 服务

'use strict';

app.factory('Post', function($firebase, FIREBASE_URL, User){
  var ref = new Firebase(FIREBASE_URL + 'posts');
  var posts = $firebase(ref).$asArray();

  var Post = {
    all: posts,
    create: function(post) {
      if(User.signedIn()) {
        var user = User.getCurrent();
        post.owner = user.username;

        return posts.$add(post).then(function(ref) {
          var postId = ref.name();
          user.$child('posts').$child(postId).$set(postId);
          return postId;
        });
      }
    },
    find: function(postId) {
            return $firebase(ref.child(postId)).$asObject();
    },
    delete: function(postId) {
      if(User.signedIn()) {
        var post = Post.find(postId);
        post.$on('loaded', function(){
          var user = User.findByUsername(post.owner);
          posts.$remove(postId).then(function(){
            user.$child('posts').$remove(postId);
          });
        });
      }
    }
  };

  return Post;

});

post.js 控制器

'use strict';

app.controller('PostsCtrl', function($scope, $location, Post) {

  $scope.posts = Post.all;

  $scope.post = {url: 'http://', title: ''};

  $scope.deletePost = function(post) {
    Post.delete(post);
  };

});

【问题讨论】:

标签: angularjs firebase angularfire


【解决方案1】:

我受够了,所以我采取了一种简单的方法(只是为了通过教程)。我创建了 userRef(这应该来自用户对象 imo):

modulename.factory("Post", function ($firebase, FIREBASE_URL, User) {
    //rest code

    var userRef = new Firebase(FIREBASE_URL + "users");

    var Post = {
        create: function(){
            //rest of the code

            return posts.$add(post).then(function (ref) {
                var postId = ref.name();

                userRef.child(user.$id).child("posts").child(postId).set(postId);

                return postId;
            });
        }
    }
});

这只是一种方法,当我在寻找一个好的解决方案时,我看到了更多的示例代码。希望对大家有所帮助。

【讨论】:

  • 感谢您,但上周 ThinksterIO 团队推出了该教程的修订版,几乎可以使用。我不确定您是否有兴趣返回它,但如果您有兴趣,您可能会遇到 post.js 工厂中的 Post.delete() 函数代码的问题。我在一个新的 SO 问题 stackoverflow.com/questions/25788083/… 中记录了它
猜你喜欢
  • 2014-10-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-10-20
  • 2015-09-18
  • 2020-11-08
  • 1970-01-01
相关资源
最近更新 更多