将 Firebase + AngularJS 用于聊天应用时出现嵌套节点问题

Question

我正在尝试创建一个小型聊天应用程序来帮助我学习 AngularFire (Firebase + AngularJS)。我想要获得的唯一功能是能够创建聊天室，然后能够在每个房间聊天。顺便说一句，如果重要的话，我会在 Rails 中执行此操作（我的用户登录和一切都通过 Rails 处理）。

到目前为止，我有这个作为我的示例代码，这就是视图的样子：

<div ng-controller="RoomsCtrl">

  <div ng-repeat="rm in rooms">
    <div>
      <ul>
        <li class="message phm pvm pull-left" ng-repeat="msg in messages">
          <span class="message-author">{{msg.from}}</span>
          <span class="message-body">{{msg.body}}</span>
          <span class="message-timestamp">{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}</span>
        </li>
      </ul>
    </div>
    <form>
      <span class="hidden"><%= current_user.full_name %></span>
      <textarea ng-model="msgBody" ng-keydown="addMessage($event)" placeholder="What's on your mind..."></textarea>
    </form>
  </div>

  <form>
    <input type="text" ng-model="roomName" ng-keydown="addRoom($event)" placeholder="Enter a room name..."><
  </form>

</div>

这是我的 AngularFire 脚本：

var app = angular.module("ChatApp", ["firebase"]);

function RoomsCtrl($scope, $firebase) {
    var organizationId;

    if (gon) {
        organizationId = gon.organization_id;
    }

    var orgRef = new Firebase("https://glowing-fire-7051.firebaseio.com/"+organizationId);

    $scope.rooms = $firebase(orgRef);

    $scope.addRoom = function(e) {
        if (e.keyCode != 13) return;
        $scope.rooms.$add({name: $scope.roomName, timestamp: new Date().getTime()})
        $scope.roomName = "";
        e.preventDefault();
    }

    $scope.messages = $firebase(orgRef);

    $scope.addMessage = function(e) {
        if (e.keyCode != 13) return;
        $scope.messages.$add({name: $scope.msgName, body: $scope.msgBody, timestamp: new Date().getTime()})
        $scope.msgBody = "";
        e.preventDefault();
    }
}

每个用户 belongs_to 和 Organization 可以通过 gon 部分看到，该部分刚刚获取 current_user 所属组织的 ID。我为addRoom 提供的代码实际上在组织下创建了一个房间。 Forge 数据如下所示：

<my forge id>
    1
         JHiiMka5OloVaqf-sA7
             name: "Test Room"
             timestamp: 1394500795299
         JHjA0rwIDJNVDU4HVaF
             name: "Another Room"
             timestamp: 1394508307247

我也看到数据也反映在网站上。当我创建一个新房间时，该房间会显示在网站上。我的问题（我认为）仅在于messages。我已经研究了几个小时，在嵌套引用的主题上几乎没有成功。我有点理解，但我无法弄清楚如何创建一个房间（通过网站动态），然后可以访问在 Firebase 中该房间的节点下创建消息。

我上面的视图代码向您展示了我认为它将如何显示在页面上。我的问题是，我如何通过 Firebase / AngularFire 将两者联系在一起？提前感谢您的帮助！如果您有任何问题可以更清楚地说明任何问题，请告诉我。

更新：

我通过他们的网站将此问题发送给 Firebase 支持，并收到了几乎所有问题的回复。我发送了一封后续电子邮件，以澄清我在他们的回复中不理解的部分，并等待返回。他们的建议是替换：

var orgRef = new Firebase("https://glowing-fire-7051.firebaseio.com/"+organizationId);

与

var orgRef = new Firebase("https://glowing-fire-7051.firebaseio.com/").child(organizationId);

这将为现有位置的子节点创建一个新的 Firebase 引用。然后他们说将其用于我的$scope.messages 定义：

$scope.messages = $firebase(orgRef.child(roomID).child("messages"));

这假设在 /1/room/ 中有一个名为“messages”的子节点，它保存着您的消息。

我遇到问题的部分是消息定义中的.child(roomID)，因为它告诉我它是未定义的（它是）。那应该定义为什么...我假设它应该是新创建的房间的 ID？

Answer 1

我终于在 Firebase + AngularJS 谷歌群组上发帖回答了我的问题。我错过了几件事。这是我的最终代码：

var app = angular.module("ChatApp", ["firebase"]);

function RoomsCtrl($scope, $firebase) {
    var organizationId;

    if (gon) {
        organizationId = gon.organization_id;
    }

    var orgRef = new Firebase("https://<my forge id>.firebaseio.com/").child(organizationId);

    $scope.rooms = $firebase(orgRef.child('rooms'));

    $scope.addRoom = function(e) {
        if (e.keyCode != 13) return;
        $scope.rooms.$add({name: $scope.roomName, timestamp: new Date().getTime()}).then(function(ref){
            var roomId = ref.name();
            $scope.messages = $firebase(orgRef.child('rooms').child(roomId).child("messages"));
        });
        $scope.roomName = "";
        e.preventDefault();
    }


    $scope.addMessage = function(e) {
        if (e.keyCode != 13) return;
        $scope.messages.$add({name: $scope.msgName, body: $scope.msgBody, timestamp: new Date().getTime()})
        $scope.msgBody = "";
        e.preventDefault();
    }
}

我缺少的主要部分是.then() 回调，我没有正确地将定义设置为$scope.messages，它将引用父房间。这些行是修复的主要部分：

$scope.rooms.$add({name: $scope.roomName, timestamp: new Date().getTime()}).then(function(ref){
    var roomId = ref.name();
    $scope.messages = $firebase(orgRef.child('rooms').child(roomId).child("messages"));
});

希望这可以帮助遇到类似问题的其他人。