AngularFire-管理$asArray上的child_aded和其他事件

Question

大家好！

我想做一件非常简单的事情：显示最后10篇帖子，最新的在顶部，当有人发布新的帖子时，显示一个栏"点击此处查看x个新帖子"，点击后显示新帖子。

我的问题是：当一个新帖子进入Firebase时，它会立即显示在屏幕上（在链接到Firebase数组的作用域的数组上使用ng repeat），并将10个元素中的旧元素删除。

$firebase(ref.limitToLast(10)).$asArray().$loaded().then(function(messagesData) { ... }

我可以使用检测变化

messagesData.$watch(function(data) {
    console.log("data changed!", data, messagesData);
    if(data.event == "child_added") {
        // work here
    }
});

但我不知道该怎么做，我也没有在医生那里找到。谢谢你的帮助！

Answer 1

好吧，有一个解决方案。在当前元素中仍然可以使用AngularFire的同时，不可能使所有内容都保持同步。以下是操作方法。

首先获取要在开始时显示的消息：

$firebase(ref.orderByKey().limitToLast(nbMessages)).$asArray().$loaded().then(function(messagesData) { ......

然后使用foreach将它们逐一链接到另一个数组：

angular.forEach(messagesData, function(value, key) {
    messagesDataReturn[key] = value;
    // get any other data you need for that message (user name, etc...
});

这将使迭代的每个元素保持同步。因此，如果有类似点赞计数器的东西，它们将实时更新。

最后添加一个观察者：

messagesData.$watch(function(data) {
    if(data.event == "child_added") {
        var newLine = messagesData.filter(function ( obj ) {
            return obj.$id === data.key;
        })[0];
        // add any needed data for this new line
        $rootScope.$broadcast('list:updated', newLine);
    }
});

在你的控制器里，你只需要听广播：

$scope.newData = [];
$scope.$on('list:updated', function (event, data) {
    $scope.newData.push(data);
});

然后，您可以使用$scope.newData显示显示新消息的方式，并单击将此数组与作用域上的主数组合并，以便显示新消息。

希望这能帮助到别人！