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对此主题的强制性阅读。

记住代码中可能发生的事情的顺序：

调用您的控制器
您的TicksheetCtrl控制器将Firebase承诺绑定到$scope
你TickCtrl控制器为其中一个承诺添加了一个监听器
控制器功能完成
Angular使用$scope

然后稍后：

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

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

解决方案很简单：

从您的处理程序调用{{1}}告诉Angular将您的更改应用于视图

实施例

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

观点：

$scope.$apply()

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

控制器：

<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>

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(); }); });项将始终显示，因为它们属于Angular所知道的功能。在Angular不知道的情况下，$scope.static项会添加到范围中，因此我们需要告知Angular将更改应用于$scope.dynamic。如果删除该行，您将看到动态项永远不会显示在渲染输出中。

AngularFire负责为您应用Firebase所带来的任何更改，这就是为什么您不必为使用$scope.$apply()或{{1}获得的项目致电$scope.$apply() }}

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

1 个答案:

实施例