AngularFire 集合长度答案

【问题标题】：AngularFire Collection LengthAngularFire 集合长度
【发布时间】：2013-09-10 23:25:13
【问题描述】：

我正在尝试获取简单 angularFireCollection 数组的长度，但似乎无法：

var stf = new FireBase("http://myfirebase-app.firebaseio.com/staff");

function staffListCtrl($scope, angularFireCollection){
    $scope.staff = angularFireCollection(stf);
    console.log($scope.staff.length);
}

控制台的输出显示：

我知道这是不正确的。它应该返回 5 左右的长度（请参阅下面的屏幕截图以获取 $scope.staff 的输出。

感谢任何帮助，因为我似乎无法完成这个绝对、非常简单的 JS 任务。

【问题讨论】：

标签： javascript angularjs firebase angularfire

【解决方案1】：

在这种情况下，在回调中打印检索到的元素数量的正确方法如下：

var stf = new FireBase("http://myfirebase-app.firebaseio.com/staff");
function staffListCtrl($scope, angularFireCollection) {
    $scope.staff = angularFireCollection(stf, function() {
        console.log(stf.numChildren());
    });
}

原因是初始回调函数在在实际分配给$scope.staff 发生之前被调用。因此，在回调函数中，您只能访问 Firebase DataSnapshot 对象 stf。希望这会有所帮助。

【讨论】：

【解决方案2】：

您试图在调用angularFireCollection 后立即访问该长度，但实际数据是通过网络检索的，因此更新数组需要一些时间。您可以将函数作为参数传递给 angularFireCollection，以便在加载初始数据时收到通知，如下所示：

var stf = new FireBase("http://myfirebase-app.firebaseio.com/staff");
function staffListCtrl($scope, angularFireCollection) {
  $scope.staff = angularFireCollection(stf, function() {
    console.log($scope.staff.length);
  });
}

【讨论】：

刚刚发现ng-hide="staff.length > 0" 在我看来有效，但在控制器中无效。抱歉这个愚蠢的问题，但我一直在为为什么我无法获得控制器中的长度而苦苦挣扎。这个问题仍然没有答案，但我会尽快检查它。谢谢，@Anant！
它在您的视图中有效，因为在加载初始数据后视图会更新。在控制器中，您必须等待第二个函数触发，然后再查找长度，就像在我的代码 sn-p 中一样。
我也看到了同样的情况。我设置了这个 plunkr，但你需要添加你的 firebase url plnkr.co/edit/VvErMju2VMkmLaYRh9hs

【解决方案3】：

啊，我在 angularfire.js 中看到了。第 298 行包含在 $timeout 中添加项目。这导致 initalCb() 在数据添加到集合之前被调用。我拉了 $timeout 并且它起作用了。但是，我不得不调用 $scope.$apply() 来反映添加的项目。我最终将范围传递给 angularFireCollection 以确保 $apply() 被调用。不知道我通过拉超时还打破了什么。

这是对问题的看法：plunkr

编辑：据我所知并在 plunkr 中显示，这是行不通的。

$scope.staff = angularFireCollection(stf, function() {
    console.log($scope.staff.length);
});

虽然从 angularfire.js 中提取 $timeout 确实解决了该特定问题，但它引起了数据绑定的各种其他问题（如预期的那样），所以我把它放回去了。似乎要走的路是使用回调中传递的快照。我找不到很多关于它的文档，但这对我有用：

$scope.staff = angularFireCollection(stf, function(snapshot) {
    angular.forEach(snapshot, function(item){
        //will let you iterate through the data in the snapshot
    });
});

【讨论】：