Question

我已经开始使用angularjs，现在我正在使用angularfire跟踪有关angularjs的教程。在本教程中，有一节介绍如何使用child_added

angular.module('firebaseApp').service('MessageService', function(FBURL, $q, $firebase) {
        var messageRef = new Firebase(FBURL).child('messages');
        var fireMessage = $firebase(messageRef).$asArray();

        return {
            childAdded: function childAdded(limitNumber, cb) {
                fireMessage.$on('child_added', function(snapshot){
                    console.log(snapshot);
                    var val = snapshot.val();
                    cb.call(this,{
                        user: val.user,
                        text: val.text,
                        name: snapshot.name()
                    });
                });
            },

和主控制器：

MessageService.childAdded(5, function(addedChild){
    $timeout(function() {
        $scope.messages.push(addedChild);
    });
});

当我使用代码时，chrome开发人员工具会出错：

TypeError: undefined is not a function

在MessageService中使用.$on，在控制器中使用.childadded。

这是一个视频教程，我可以看到他像这样工作。我检查了很多答案但找不到方法。我最好的镜头是我猜不同版本的angularjs和angularfire。但这对我也没有帮助。你能帮我解决一下吗？

提前谢谢。

Answer 1

我认为我会为那些参加tutsplus教程的人提供一些明确的话题。首先，我们应该注意我们正在使用的firebase和angularfire的版本，与教师使用的版本相比。这似乎是显而易见的，但有很多人没有意识到这一点。每当观看教程时，您应该始终检查您正在使用的任何软件包的版本。这个软件世界变得非常快，最新的教程是一种奢侈。

注意项目中的bower.json文件。请注意以下行的版本： "firebase": "~2.0.4", "angularfire": "~0.9.0"

您可以在此处看到我使用的依赖项的版本。很可能，你和我一样，你的版本会与你在教师版本中找到的版本不同。教师在课程主页上提供他的源文件。下载这些文件，标题为SourceFiles_RTWebAppAngularFirebase.zip。下载后，打开它，您将看到一个名为Firebase Source的文件中包含的打包zip文件列表。找到lesson-16-angularfire.zip，并打开它。应该提供一个名为“Firebase”的文件夹，在那里你可以找到他在教程中创建的教师应用程序。查看他的bower.json文件，并根据您的内容进行检查。根据我的发现，firebase和angularfire的两个版本都有很大不同。这只意味着一件事：我们有一些阅读要做。

转到此处查看AngularFire的发布：https://github.com/firebase/angularfire/releases

向下滚动，阅读v0.8.0的发行说明。这里有一个非常重要的注释。

$ on（）和$ off（）不再存在。使用$ watch（）可以获得类似的功能，但是不应该尝试手动管理服务器事件（操作应该通过$ extendFactory（）进行数据转换）。

显然现在，我们明白我们不能盲目地跟随教师的脚步。我们必须尝试模仿他的应用程序的功能。阅读上面发布的内容，我们可以使用$watch来获得类似的功能。但是，老实说，我试图让这项工作成功，$watch提供的功能并不完全是我们想要实现的功能。理想情况下，我们应该将空消息数组$scope.messages与$firebase(messageRef).$asArray()同步。这不会那么有趣。

我采取的路线是：我查看cb.call()正在做什么，这是以下

MessageService.childAdded(function(addedChild) {
    $scope.messages.push(addedChild);
});

此回调函数推送从从“child_added”事件返回的快照获取的cherry选择值创建的对象。这里的真正杠杆是快照，它由$ firebase模块本身提供Firebase.on()。如果您阅读“Child_Added”事件的文档，则说明

此事件将针对此位置的每个初始子项触发一次，并且每次添加新子项时都会再次触发该事件。传递给回调的DataSnapshot将反映相关子项的数据

为此位置的每个“初始”子项返回的DataSnapshot是最初填充消息列表的内容。这意味着我们可以改变这一点：

fireMessage.$on('child_added', function(snapshot){
    console.log(snapshot);
    var val = snapshot.val();
    cb.call(this,{
       user: val.user,
       text: val.text,
       name: snapshot.name()
    });
});

回到这个：

messageRef.on('child_added', function(snapshot) {
  var val = snapshot.val();
    cb.call(this, 
       user: val.user,
       text: val.text,
       name: snapshot.key()
    });
});

消息应该在首页上再次填充。您的代码应该足够稳定，以便在重构课程的其余部分中跟随教师。

$ on（'value ...）在angularfire中给了我“undefined is not function”

1 个答案: