AngularFire的子承诺 - 通过ID选择相关的孩子？

Question

我有一个json集合,我已经上传到我的firebase,这些网站和工具通过位于前者的数组相关联,指向后者中的键

  "sites": {
    "s001": {
      "name": "ACT-105",
      "description": "Intro Accounting",
      "type": "course",
      "thumbnail": "debate",
      "toolCount": 4,
      "tools" : ["t001","t002","t003"]
    },
    "s002": {
      "name": "ART-201",
      "description": "Pottery Lab",
      "type": "course",
      "thumbnail": "sculpture",
      "toolCount": 4,
      "tools" : ["t001","t002","t003","t004"]
    },
  "tools": {
    "t001": {
      "name": "main-tool",
      "title": "Home",
      "description": "Main tool",
      "thumbnail": "home.jpeg"
    },
    "t002": {
      "name": "announce-tool",
      "title": "Announcements",
      "description": "System Announcements",
      "thumbnail": "announcements.jpeg"
    },

我打开一个网址并承诺; 然后在数组中获取当前站点及其相关工具数组,然后打开另一个循环并获取所有相关工具的承诺.从警报中,它似乎只抓取一个工具然后退出.

    angular.module("foo", ["firebase"]).
   controller("MyCtrl", ["$scope", "angularFire", function($scope, angularFire) {
  var dbRef = "https://sampledb.firebaseio.com";
  var siteRef = new Firebase(dbRef + "/sites/s003");
  var promise  =  angularFire(siteRef, $scope, "site", {});
  var sitetools = [];
  promise.then(function() {
      sitetools = $scope.site.tools;
      alert("tools " + sitetools);
  }).then(function () {

      var toolList = [];
      for (var i=0;i<sitetools.length;i++)
      {    
          alert("tool " + sitetools[i]);
          toolList.push(getTool(dbRef,toolId));
       }
       $scope.tools = toolList;
  });
  }]);

  var getTool = function(dbRef,toolId) {
  var toolitem;
  var toolRef = new Firebase(dbRef + "/tools/" + toolId);
  alert(toolRef);
  var promise  =  angularFire(toolRef, $scope, "tool", {});
  promise.then(function() {
      alert("found tool " + toolId);
      toolitem = $scope.tool;
  }); 
  return toolitem;
  };

小提琴在这里:http://jsfiddle.net/5n9mj/1/

Answer 1

首先,你应该得到警报(其中3个),因为迭代按预期进行,但是getTool()函数的返回始终为null:它在解析promise之前返回,并且不再可以访问本地的tooitem变量.

请记住,所有Firebase调用都是异步的.此外,这段代码:

var promise  =  angularFire(toolRef, $scope, "tool", {});
    promise.then(function() {
    alert("found tool " + toolId);
    toolitem = $scope.tool;
}

将触发竞争条件:$ scope.tool与Firebase绑定,并且无法保证它将按特定顺序绑定,并且如果在解决另一个promise之前有足够的处理器时间将其推入阵列.这就是为什么最好使用Firebase引用来监听值变化,而不是使用angularFire并将其显式绑定到范围变量.

我认为你的代码过于复杂,你不必每次绑定范围变量时都要创建新的Firebase引用(除非你以后要使用引用)与angularFire:angulerFire可以接受String url,因为它是第一个参数.

http://jsfiddle.net/oburakevych/5n9mj/10/

如果我是你,我会将工具功能包装到一个带有单独控制器的指令中,这样每个工具都有自己的范围,如下所示:

<ul ng-repeat="toolId in tools">
    <li><tool tool-id="{{toolId}}"/></li>
</ul>

var promise  =  angularFire(siteRef, $scope, "site", {});
promise.then(function() {
        $scope.broadcast("event:SITE_INITIALIZED");
});

.controller("MyCtrl", ["$scope", "angularFire", '$timeout', function($scope, angularFire, $timeout) {
    $scope.$on("event:SITE_INITIALIZED", function() {
            angularFire(siteRef + "/item/" + $scope.itemId, $scope, "item", {});)
    });