AngularFire – 嵌套的 Firebase 请求不起作用答案

【问题标题】：AngularFire – Nested Firebase requests don't workAngularFire – 嵌套的 Firebase 请求不起作用
【发布时间】：2014-03-08 15:56:16
【问题描述】：

我在控制器中有以下代码：

FirebaseService.$child('tasks').$on('loaded', function(tasks) {
    console.log('tasks loaded');
    FirebaseService.$child('taskTemplates').$on('loaded', function(taskTemplates) {
        console.log('taskTemplates loaded');
    });
});

控制台只显示tasks loaded，第二个console.log 永远不会执行。如果我按顺序请求这些孩子（taskTemplates 的请求不在加载的回调中），它可以无缝工作。这种奇怪的行为有什么原因吗？

一些背景信息：加载任务时，我需要对它们进行检查，在某些情况下——而且只有这样——我想加载任务模板。

这是我的 FirebaseService，如果有帮助的话：

app
.value('FIREBASE_URL', 'XXXXXXXXXXXX.firebaseIO.com/')
.service('FirebaseService', function($firebase, FIREBASE_URL) {
    return $firebase(new Firebase(FIREBASE_URL));
});

非常感谢您的帮助！

【问题讨论】：

为什么要麻烦嵌套调用loaded？当父数据加载时，它已经包含所有子数据，因此子数据已经加载。
好吧，tasks 是 taskTemplates 的兄弟——那还适用吗？
我误解了，以为您在 tasks 对象上调用 $child。问题撤回！

标签： javascript angularjs firebase angularfire

【解决方案1】：

我的第一个怀疑是这个错误看起来类似于this series of bugs，其中一个是如果在初始加载后声明，加载只会触发一次。由于 FirebaseService 在父路径上调用 $firebase，所有子数据已经在本地缓存，这将导致 loaded 事件同步触发（可能在您附加侦听器并因此触发上面列出的错误之前）。

但是，我无法在 angularFire 版本 0.6.0、0.7.0 或最新的 master 分支中重现您在上面显示的行为。这是我的再现：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script src="http://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.7.0/angularfire.min.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">

<ul>
    <li ng-repeat="log in logs">{{log}}</li>
</ul>

<script type="text/javascript">
    angular.module('app', ['firebase']).controller('ctrl', function($firebase, $scope) {
        $scope.logs = [];
        var fb = new Firebase('https://kato-sandbox.firebaseio-demo.com/');
        var ref = new $firebase(fb);
        var childA = ref.$child('alpha');
        childA.$on('loaded', function() {
            $scope.logs.push('alpha loaded');
            var childB = ref.$child('bravo');
            childB.$on('loaded', function() {
                $scope.logs.push('bravo loaded');
            })
        })
    });
</script>
</body>
</html>

希望这将帮助您缩小错误的范围，尽管它本身并不是一个解决方案。

【讨论】：