5

自動インクリメント limitTo を使用して ng-repeat で orderBy を使用すると問題が発生します。ページがいくつかの要素をロードすると、ディレクティブは機能を停止し、要素の制限の増加を停止します。

これはhtmlです：

<div class="row" id="main">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate"
             ng-if="!errorDialogActive"
             ng-repeat="build in builds.builds.build | limitTo:totalDisplayed | orderBy:'lastBuildDetails.startDate' : true track by build._id"
             ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}"
             id="{{build._id}}"
             progressive-loading>
            <div class="title-container animate" ><p>{{build._buildTypeId}}</p></div>
            <div class="update-container animate col-xs-12">
            <time class="time">{{build.buildDate | date : 'dd.MM.yyyy H:mm:s'}} </time>
            </div>
        </div>
    </div>

これはディレクティブです:

return function (scope) {
    if (scope.$last) {
        $timeout(function () {
            console.log('Im the last Displayed, Loading more');
            scope.loadMore();
        }, 100);
    }
};

そして最後に loadMore 関数

    $scope.loadMore = function () {
        if ($scope.totalDisplayed >= $scope.size) {
            console.log('no more builds : ' + $scope.totalDisplayed);
            $scope.loaded=true;
        } else {
            $scope.totalDisplayed += 2;
            console.log('More : ' + $scope.totalDisplayed);
            $scope.totalDisplayedPercentage = (($scope.totalDisplayed*100)/$scope.size);
            console.log('Percentage : ' + $scope.totalDisplayedPercentage);
        }
    };

私の英語で申し訳ありませんが、私が理解できない場合、またはさらに情報が必要な場合は、お知らせください。

4

1 に答える 1

2

ディレクティブ リンク関数は、新しいレンダリングされた要素のみを呼び出しているため、orderBy作業中は、新しいレンダリングされた要素を中央に配置でき、特別なプロパティscope.$lastはもちろん false になるため、timeoutを開始しません。

次のようなカウンターをエミュレートすることができます:
注: この最も単純なサンプルは、ページ上にある場合にのみ正しく機能する可能性があります。

app.directive('progressiveLoading', ['$timeout', function ($timeout) { 
    var counter=1;
    return function (scope) { 
        if (counter == scope.displayStep) { 
            counter = 1;
            $timeout(function () { 
                console.log('Im the last Displayed, Loading more'); 
                scope.loadMore(); 
            }, 500); 
        }else{
            counter += 1;
        }
    }; 
}]);

非常に単純化されたサンプル:

// Code goes here
var app = angular.module('app', []);

app.directive('progressiveLoading', ['$timeout',
  function($timeout) {
    var counter = 1;
    return function(scope) {
      if (counter == scope.displayStep) {
        counter = 1;
        $timeout(function() {
          console.log('Im the last Displayed, Loading more');
          scope.loadMore();
        }, 500);
      } else {
        counter += 1;
      }
    };
  }
]);

app.controller('ctrl', ['$scope',
  function($scope) {
    $scope.totalDisplayed = 2;
    $scope.displayStep = 2;
    $scope.loaded = false;

    $scope.build = [{
      _id: 1,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 1
      },
      _buildTypeId: 1
    }, {
      _id: 2,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 10
      },
      _buildTypeId: 2
    }, {
      _id: 3,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 9
      },
      _buildTypeId: 3
    }, {
      _id: 4,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 8
      },
      _buildTypeId: 4
    }, {
      _id: 5,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 7
      },
      _buildTypeId: 5
    }, {
      _id: 6,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 6
      },
      _buildTypeId: 6
    }, {
      _id: 7,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 5
      },
      _buildTypeId: 7
    }, {
      _id: 8,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 4
      },
      _buildTypeId: 8
    }, {
      _id: 9,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 3
      },
      _buildTypeId: 9
    }, {
      _id: 10,
      _status: 'SUCCESS',
      lastBuildDetails: {
        startDate: 2
      },
      _buildTypeId: 10
    }];
    $scope.size = $scope.build.length;
    $scope.totalDisplayedPercentage = (($scope.totalDisplayed * 100) / $scope.size);

    $scope.loadMore = function() {
      console.log('loadMore', $scope.totalDisplayed, $scope.size);
      if ($scope.totalDisplayed >= $scope.size) {
        console.log('no more builds : ' + $scope.totalDisplayed);
        $scope.loaded = true;
      } else {
        $scope.totalDisplayed += $scope.displayStep;
        console.log('More : ' + $scope.totalDisplayed);
        $scope.totalDisplayedPercentage = (($scope.totalDisplayed * 100) / $scope.size);
        console.log('Percentage : ' + $scope.totalDisplayedPercentage);
      }
    };
  }
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="row" id="main" ng-app="app" ng-controller="ctrl">
<div>{{totalDisplayedPercentage}}%</div>  
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 block animate" ng-repeat="build in build | limitTo:totalDisplayed | orderBy:'lastBuildDetails.startDate' : true track by build._id" ng-class="{'running': project.running ,'block-green': build._status ==='SUCCESS','block-red': build._status==='FAILURE'}"
  id="{{build._id}}" progressive-loading="">
    <div class="title-container animate">
      <p>{{build._buildTypeId}}</p>
    </div>
  </div>
</div>

于 2015-04-16T14:00:43.897 に答える