firebase 获取每个子项的子项的数据

Question

大家好，我是 firebase 的超级新手，我需要一些帮助。

首先，我正在做的是关于一个勾选表。例如，一个刻度表包含一个包含刻度日志的项目列表，因此我将数据设计如下：

Ticksheets：

ticksheets:
   -JbN5ol2jGRtAOZ9ovrO(auto generated id by firebase)
     created_on: 
     description: 
     name: 
     owner: 
   -JbN5ol2jGRtAOZ9ovrO
     created_on: 
     description: 
     name: 
     owner: 

滴答声：

ticks:
   -JbOGA1s3Tl3jtKPQe43 //ticksheet ID
       -JbOHE6wY5CLz1wazNUx //itemID
         Thu Nov 27 2014 01:51:40 GMT 0800 (MYT)
             timestamp:
       -JbhDiX4iDneG34LzEgA // itemID
         Thu Nov 27 2014 01:51:44 GMT 0800 (MYT)
             timestamp:
         Thu Nov 27 2014 01:51:47 GMT 0800 (MYT)
         Thu Nov 27 2014 01:53:48 GMT 0800 (MYT)
         Thu Nov 27 2014 01:53:51 GMT 0800 (MYT)

查看：

<ion-view title="{{ticksheet.name}}" class="button-positive">
      <ion-content class="has-header" ng-repeat="ticksheetItem in ticksheetItems">
        <div class="row" ng-repeat="ticksheetItem in ticksheetItems" ng-if="$index%2==0" >
            <div class="col col-50" ng-if="$index<ticksheetItems.length" ng-controller="TickCtrl" ng-click="incrementCount(ticksheetItem.$id,ticksheet.$id)">
                <div class="tick-item" style="background-color: #B7E5B0;">
                    <div class="tick-item-row1 row"> 
                        <i class="icon ion-gear-a font-size-l dark col col-10"></i> &nbsp;
                        <strong class="font-size-m col dark">{{ticksheetItems[$index].name}}</strong>
                    </div>
                    <div class="row">
                        <p class="col col-10" ng-controller="TickCtrl">
                            {{count.test}} // I'd like to put the length of the child here
                        </p>
                        <p class="col dark">
                            {{ticksheetItems[$index].description}}
                        </p>
                    </div>
                </div>
            </div>

            <div class="col col-50" ng-if="($index+1)<ticksheetItems.length">
                <div class="tick-item" style="background-color: #514D4F">
                    <div class="tick-item-row1 row"> 
                        <i class="icon ion-settings font-size-l dark col col-10"></i> &nbsp;
                        <strong class="font-size-m col light">{{ticksheetItems[$index+1].name}}</strong>
                    </div>
                    <div class="row">
                        <p class="col col-10">
                                   // I'd like to put the length of the child here
                        </p>
                        <p class="col item-note">
                            {{ticksheetItems[$index+1].description}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
      </ion-content>
    </ion-view>

在我看来我有 我需要显示刻度总数的 ticksheetItems 的 ng-repeat 所以我不知道如何填充该特定刻度表下的刻度总数

控制者：

//specific ticksheet ctrl
.controller('TicksheetCtrl', function($scope, $rootScope,$firebase, $stateParams) {
  $scope.baseUrl =  $rootScope.baseUrl+'ticksheets/'+ $rootScope.authData.uid + '/' + $stateParams.ticksheetId;

  var ref = new Firebase($scope.baseUrl)
  var ticksheet = $firebase(ref);
  var ticksheetItems = $firebase (ref.child('ticksheetItems'));
  $scope.ticksheet = ticksheet.$asObject();// parent ticksheet
  $scope.ticksheetItems = ticksheetItems.$asArray();//ticksheet Items  
})

.controller('TickCtrl', function($scope, $rootScope,$firebase, $stateParams) {
  $scope.baseUrl = $rootScope.baseUrl + 'ticks/';

  $scope.incrementCount = function(itemId,ticksheetId){

    $rootScope.show('counting up');

    var ref = new Firebase($scope.baseUrl + ticksheetId + '/' + itemId + '/' + new Date()) //didn't use SERVER TIMESTAMP yet

    // adding ticksheet log to 'ticks' record
    var form = {
      timestamp: Firebase.ServerValue.TIMESTAMP,
    }

    ref.push(form,function(){
      $rootScope.hide();
    });

    var ticks = $firebase(ref.parent());
    var tickCount = $firebase(ref.parent()).$asArray();    

    tickCount.$loaded().then(function(sync) {
      console.log(sync.length); 
      console.log(sync[1]);
      console.log('item count' + itemId, $scope.count.itemId)

      $scope.count.test = (sync.length - 1);
      $rootScope.notify('total count for this item is: ' + (sync.length -1) );     
    });

  }
  //$scope.totalCount = I don't know how to populate {{count}} on my view per ticksheet item
})

请指教。如果我已广泛或不清楚地发布了问题，请发表评论，以便我知道需要改进的地方。非常感谢！

Answer 1

在您计算完总数后，Angular 似乎没有更新您的视图。您应该考虑将this article 列为此主题的必读内容。

记住事情（可能）在您的代码中发生的顺序：

1. 你的控制器被调用
2. 您的 TicksheetCtrl 控制器将 Firebase 承诺绑定到 $scope
3. 你的 TickCtrl 控制器为这些承诺之一添加了一个监听器
4. 控制器功能完成
5. Angular 使用$scope 中的值更新视图

然后在稍后的某个时间点：

6. 数据来自 Firebase
7. 这会调用您的 $loaded().then( 处理程序
8. 您的处理程序计算一个值并将其添加到$scope

请注意，在第 8 步之后，Angular 不知道要更新视图。

解决方法很简单：

9. 从您的处理程序中调用 $scope.$apply() 以告诉 Angular 将您的更改应用到视图

示例

我已经建立了一个最小的例子来说明这个问题：http://jsbin.com/wowoni/1/edit?html,js,output

观点：

<div ng-controller='MainCtrl'>
  <h2>static items (from code)</h2>
  <ul>
    <li ng-repeat='item in static'>{{item}}</li>
  </ul>

  <h2>dynamic items (from Firebase)</h2>
  <ul>
    <li ng-repeat='item in dynamic'>{{item}}</li>
  </ul>
</div>

如您所见，视图包含两个列表。第一个列表将显示所谓的静态项目，第二个列表将显示来自 Firebase 的项目。

控制器：

app.controller('MainCtrl', function(FBURL, $scope) {
  $scope.static = [ 'static1', 'static2', 'static3' ];

  var ref = new Firebase(FBURL);
  ref.on('value', function(snapshot) {
    $scope.dynamic = snapshot.val().items;
    $scope.$apply();
  });
});

$scope.static 项将始终显示，因为它们位于 Angular 知道的函数中。 $scope.dynamic 项是在 Angular 不知道的时候添加到作用域中的，因此我们需要告诉 Angular 使用 $scope.$apply() 应用我们的更改。如果删除该行，您将看到动态项永远不会出现在渲染输出中。

AngularFire 会为您应用来自 Firebase 的任何更改，这就是为什么您不必为使用 $asObject() 或 $asArray() 获得的项目调用 $scope.$apply()。