每次访问AngularJs控制器.appendChild()

Question

我最近创建了一个聊天功能，我注意到了一个奇怪的bug。以下是我在控制器中使用的代码：

    myFirebase.on('child_added', function(snapshot) {
    var msg = snapshot.val();
    var msgUsernameElement = document.createElement("b");
    msgUsernameElement.textContent = msg.user;

    var msgTextElement = document.createElement("p");
    msgTextElement.textContent = msg.message;

    var msgElement = document.createElement("div");
    msgElement.appendChild(msgUsernameElement);
    msgElement.appendChild(msgTextElement);

    document.getElementById("messages").append(msgElement);
  });

假设我们第一次输入chat视图，那么当我聊天时，.appendChild()非常好地工作，并且输入的消息显示在div 'messages‘中。现在假设我们保留Chat视图并重新输入它，然后键入并发送另一个聊天消息，然后执行两次.appendChild()，在div 'messages‘中出现两次相同的消息。如果我们第五次重新输入控制器并发送一条消息，该消息将被附加到div‘message’5次.这里发生什么事情？

我正在使用Ionic框架和现成的应用程序模板'Tabs‘。我的聊天功能在聊天细节控制器中。

Answer 1

问题在于事件处理程序被添加了两次，一次是在您第一次访问聊天页面时，另一次是在您返回时。要确认这一点，请第三次访问它，您应该看到它3x。

解决方案是放入一个$onDestroy处理程序来删除事件处理程序。如果事件处理程序不能被移除(即它没有off方法)，那么您应该设置一个变量来告诉您它已经初始化了，并且在初始化页面时检查它(防止您执行两次)

Answer 2

因此Mikkel给出了正确的建议，初始化一个变量，并且基本上使用它作为标志，以确保我的事件处理程序不会被多次调用，给Chat视图多个条目，但只调用一次。以下是我的解决办法：

    if (window.localStorage.getItem("notVisited") == null){ //This initilizes a variable in localstorage
         window.localStorage.setItem("notVisited","true");
    }

    var startListening = function() {
     myFirebase.on('child_added', function(snapshot) {
     var msg = snapshot.val();
     var msgUsernameElement = document.createElement("b");
     msgUsernameElement.textContent = msg.user;

     var msgTextElement = document.createElement("p");
     msgTextElement.textContent = msg.message;

     var msgElement = document.createElement("div");
     msgElement.appendChild(msgUsernameElement);
     msgElement.appendChild(msgTextElement);

     document.getElementById("messages").append(msgElement);
    });
    window.localStorage.setItem("notVisited","false");
   }
if (window.localStorage.getItem("notVisited") == "true") {
    startListening();
}

现在，在实现这个程序之后，我遇到了一个新的问题，就是每次我重新输入视图时，都不会出现以前的聊天消息。所以我补充说：

        if (window.localStorage.getItem("notVisited") == "false"){
$http({
    url: "https://uniff-f4136.firebaseio.com/" + chatKey + ".json",
    method: "GET"
    }).then(function (response) {
        for (var i in response.data){
            var msgUsernameElement = document.createElement("b");
            msgUsernameElement.textContent = response.data[i].user;

            var msgTextElement = document.createElement("p");
            msgTextElement.textContent = response.data[i].message;

            var msgElement = document.createElement("div");
            msgElement.appendChild(msgUsernameElement);
            msgElement.appendChild(msgTextElement);

            document.getElementById("messages").append(msgElement);
        }
    });
}

最后，这使我的聊天工作，虽然我不喜欢重复的代码。我希望其他人觉得这很有见地。最后，要了解如何使用firebase构建实时web聊天应用程序，请访问Google CodeLabs链接：https://codelabs.developers.google.com/codelabs/cloud-firebase-chat/#4。