【发布时间】: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);
};
});
【问题讨论】:
-
Thinkster 教程目前已与最新版本的 AngularFire 过时。 AngularFire 的 0.8 更新带有几个新的同步方法($asObject 和 $asArray),同时删除了 $child 和 $on。有关更多详细信息,请参阅文档。 firebase.com/docs/web/libraries/angular/api.html
标签: angularjs firebase angularfire