Question

我正在关注使用Angularjs和Firebase的tutsplus实时网络应用程序。我有main.js（下面），它允许我实时添加和更改Firebase中的项目而无需刷新浏览器（在Chrome和Safari中）。但是，当我从Firebase删除邮件时，我必须刷新浏览器以便更新邮件列表 - 因此不能实时更新。我看不出问题出在哪里。

/*global Firebase*/
'use strict';

/**
 * @ngdoc function
 * @name firebaseProjectApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the firebaseProjectApp
 */
angular.module('firebaseProjectApp')
  .controller('MainCtrl', function ($scope, $timeout) {
    var rootRef = new Firebase('https://popping-inferno-9738.firebaseio.com/');
    var messagesRef = rootRef.child('messages');

    $scope.currentUser=null;
    $scope.currentText=null;
    $scope.messages=[];

    messagesRef.on('child_added', function(snapshot){
        $timeout(function() {
            var snapshotVal = snapshot.val();
            console.log(snapshotVal);
            $scope.messages.push({
                text: snapshotVal.text,
                user: snapshotVal.user,
                name: snapshot.key()

            });         
        });
    });

    messagesRef.on('child_changed', function(snapshot){
        $timeout(function() {
            var snapshotVal = snapshot.val();
            var message = findMessageByName(snapshot.key());
            message.text = snapshotVal.text;
        });
    });
    messagesRef.on('child_removed', function(snapshot){
        $timeout(function() {
            var snapshotVal = snapshot.val();
            var message = findMessageByName(snapshot.key());
            message.text = snapshotVal.text;
        });
    });
    function deleteMessageByName(name){

        for(var i=0; i < $scope.messages.length; i++){
            var currentMessage = $scope.messages[i];
            if(currentMessage.name === name){
                $scope.messages.splice(i, 1);
                break;
            }
        }
    }
    function findMessageByName(name){

        var messageFound = null;
        for(var i=0; i < $scope.messages.length; i++){
            var currentMessage = $scope.messages[i];
            if(currentMessage.name === name){
                messageFound = currentMessage;
                break;
            }
        }
        return messageFound;
    }

    $scope.sendMessage = function(){

        var newMessage = {
            user: $scope.currentUser,
            text: $scope.currentText 
        };

        messagesRef.push(newMessage);
    };


  });

Answer 1

从Firebase删除邮件时调用的代码：

messagesRef.on('child_removed', function(snapshot){
    $timeout(function() {
        var snapshotVal = snapshot.val();
        var message = findMessageByName(snapshot.key());
        message.text = snapshotVal.text;
    });
});

此代码实际上从未实际删除HTML / DOM中的消息。

有一种方便的deleteMessageByName方法来处理删除。因此，如果您将上述内容修改为此，它将起作用：

messagesRef.on('child_removed', function(snapshot){
    $timeout(function() {
        deleteMessageByName(snapshot.key());
    });
});

Firebase child_removed无法实时工作

1 个答案: