为什么 AngularFire 聊天示例会中断？答案

【问题标题】：Why is the AngularFire chat example breaking?为什么 AngularFire 聊天示例会中断？
【发布时间】：2013-10-23 19:43:06
【问题描述】：

作为练习，我正在向基本的 angularFire 聊天应用程序添加电子邮件身份验证，如 http://angularfire.com/tutorial/ 所示。在这个过程中，我注意到通过伪造删除第一个条目，一个未定义的条目出现在 DOM 中，该条目曾经是 0 条目。

当我删除第二个 (id 1) 条目时，由于以下错误消息，没有显示任何内容： 不允许在转发器中重复。中继器：消息中的消息键：未定义：未定义

我注意到教程中第一个 undefined 出现在我的代码源自的教程中，但不是第二个......直到我将 .firebaseio-demo.com url 替换为我的 firebase 的那个。这让我相信这不是我的代码实现。

我想念的 .firebaseio-demo.com 的烟雾和镜子背后是什么？有什么神秘的验证规则吗？

在某个时候，angularjs.org 上的 Wire up a Backend 示例遇到了同样的问题。最近它似乎已得到纠正。

【问题讨论】：

标签： angularjs firebase angularfire

【解决方案1】：

我看到了同样的事情，这对我来说感觉像是一个错误（从伪造的数组中删除的项目不应该出现在客户端的 angularFire 绑定模型数组中）。当使用对象集合而不是数组时，这种效果也不会发生，例如使用angularFireCollection 或将原始messages 类型设置为对象时：$scope.messages = {} 而不是$scope.messages = []。

但是，由于那些已删除的项目在结果数组中显示为 undefined，因此数组中有多个 undefined 会导致 AngularJS 转发器具有相同的值，即 @987654321 @。因此，您在删除多条消息后看到的错误实际上是预期的。

无论如何，目前看来最好的避免它的方法是使用对象集合而不是上面提到的数组，或者设置某种 Angular filter 来清除转发器的任何 undefined 成员。

【讨论】：

即使您设置了$scope.messages = {}，该行为仍然存在。我从聊天 tut 添加了另外两个条目，然后删除了前 2 个条目，然后导入了演示 firebase，从而创建了 chatterr.firebaseio.com。看看这是否能让你重现问题。
我完全困惑为什么用户创建的 firebase 和演示创建的 firebase 之间的行为会有所不同。
您不能在已经是一个数组的现有 FB 位置上将 $scope.messages 切换到 {}，引用位置需要以这种方式初始化。但是您还需要更改添加新消息的方式，因为对象没有 push 方法。
我看不出演示与普通 firebase 的行为有什么不同。
出于某种原因，我认为这是 firebase 的 push() 函数，而不是数组上的 push 方法。至于普通与演示，演示上的数组似乎会自动删除空条目。正常的与此导出不同：[ null, null, { "from" : "foo", "body" : "bar"}, { "from" : "foo", "body" : "baz"} ]。也许还有一些额外的逻辑。