类型错误:提交时未定义不是函数 &使用 AngularFire 和 AngularJS 删除帖子(ThinksterIO 教程第 7 章) [英] TypeError: undefined is not a function while submitting & deleting post using AngularFire and AngularJS (ThinksterIO Tutorial Chapter 7)
问题描述
我在 Thinkster.io AngularJS 教程:学习构建现代 Web 应用程序中遇到了多个 TypeErrors 第 7 章使用 firebase 创建您自己的用户数据，因为在 AngularFire 升级到 v0.8.0 后，本教程现已过时.特别是 .$child() 和 .$on() 方法已被删除.这是更改日志
I've run into multiple TypeErrors with the Thinkster.io AngularJS Tutorial: Learn to build Modern Webapps Chapter 7. Creating your own user data using firebase since the tutorial is now outdated after AngularFire was upgraded to v0.8.0. Specifically the .$child() and .$on() methods have been taken out. Here is the change log
https://github.com/firebase/angularfire/releases/tag/v0.8.0
在获得帮助解决我最初的 TypeError 之后问题 在注册新用户期间，当我提交帖子和尝试删除帖子时，我开始看到 2 个新的 TypeError 出现.罪魁祸首是过时的 .$child() 和 .$on() 方法.
After getting help solving my initial TypeError issues during registering a new user, I began to see 2 new TypeErrors show up when I submit a post and when I try to delete a post. Once again the culprits are the outdated .$child() and .$on() methods.
提交帖子后，我看到控制台中显示以下类型错误
After submitting a post I see the following TypeError show up in the console
这个TypeError指向post.js服务
This TypeError points to the post.js service
TypeError: undefined is not a function
at http://localhost:9000/scripts/services/post.js:16:11
这是 $child 方法调用开头的第 16 行第 11 列.另外，请注意第一个 .&child() 之后的第二个.这将导致另一个 TypeError.
which is line 16, column 11 at the beginning of the $child method call. Also, note the second .&child() following the first. That will result in another TypeError.
return posts.$add(post).then(function(ref) {
var postId = ref.name();
user.$child('posts').$child(postId).$set(postId);
return postId;
});
我会提到，即使我收到此 TypeError，我仍然能够成功创建帖子，并且我在 Forge 和应用的帖子列表中看到了它.
I will mention that even though I get this TypeError, I'm still able to successfully create a post and I see it in the Forge and in the app's post list.
当我尝试删除我刚刚创建的帖子时，我收到另一个与现已弃用的 .$on() 方法相关的 TypeError.
When I try to delete a post that I just created I get another TypeError related to the now deprecated .$on() method.
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服务
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);
});
});
}
}
我意识到我将不得不做类似的事情
I realize that I will have to do something like
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 时，我就会迷失方向并不知所措到要关闭的地步.一如既往地非常感谢任何指导.
but the problem is that when a JS beginner like me comes along faced with the AngularFire change logs and API, I just get lost and overwhelmed to the point of shut down. Any guidance is greatly appreciated as always.
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);
};
});
推荐答案
我受够了，所以我采用了一种简单的方法(只是为了通过教程).我创建了 userRef(这应该来自 User 对象 imo):
I was fed up, so I took a easy approach (just to get trough the tutorial). I created userRef (this should come from the User object 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;
});
}
}
});
这只是一种方法，当我在寻找一个好的解决方案时，我看到了更多的示例代码.我希望它有点帮助.
This is just one approach, when I was searching for a good solution, I saw some more example codes. I hope it helps a little bit.
这篇关于类型错误:提交时未定义不是函数 &使用 AngularFire 和 AngularJS 删除帖子(ThinksterIO 教程第 7 章)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
