離子無限滾動，僅在導航離開並返回頁面時才滾動

Question

我有一個離子含量，其中有一個離子清單。

這是我的HTML：

<ion-content>
<ion-view>
<ion-list >
<div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
    <a class='normala' href="#/tab/dash/{{maanta.id}}">
    <div class='cardHeader item-text-wrap'>
    {{maanta.title}}
    </div>
    <hr class='divi'>
    <div class='cardDivider item-text-wrap'>
    {{maanta.source}} - {{maanta.pub_date}}
    </div>
    <hr class='divi'>
    <div class='cardBody item-text-wrap'>
    {{maanta.summery}} 
    </div>
</a>
</div>    </ion-list>

    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>

</ion-content>
</ion-view>

這是我的JS：

$scope.limit = 10;
$scope.loadMore = function() {
    $scope.limit +=10
    if ( $scope.maanta.length <$scope.limit) {
      $scope.noMoreItemsAvailable = true;
    }
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

問題

當我第一次登陸頁面時，無限滾動不會改變ng-repeat的限制。 當我導航到另一個頁面並返回時，無限循環將按預期工作。

Answer 1

查看您的HTML。 標簽順序有誤：

<ion-content>
    <ion-list >
        <div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
            <a class='normala' href="#/tab/dash/{{maanta.id}}">
                <div class='cardHeader item-text-wrap'>
                    {{maanta.title}}
                </div>
                <hr class='divi'>
                <div class='cardDivider item-text-wrap'>
                    {{maanta.source}} - {{maanta.pub_date}}
                </div>
                <hr class='divi'>
                <div class='cardBody item-text-wrap'>
                    {{maanta.summery}} 
                </div>
            </a>
        </div>    </ion-list>

    <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>

不需要標簽<ion-view> 。

Answer 2

我認為您應該重新考慮您的方法，並嘗試將新內容推送到您的視圖中。 關鍵是推動新內容。

前例（來自用戶在代碼筆上的DILIP ：）

<ion-infinite-scroll distance="2"
       on-infinite="loadMoreData()"
       ng-if="!moredata"  >
</ion-infinite-scroll>

var app = angular.module("ionicInfiniteScrollApp",['ionic']);
app.controller("InfiniteAppCntrl",function($scope)
{
$scope.moredata = false;

$scope.loadMoreData=function()
{
    $scope.items.push({id: $scope.items.length});
    if($scope.items.length==100)
    {
        $scope.moredata=true;
    }
  $scope.$broadcast('scroll.infiniteScrollComplete');
};
$scope.items=[];
});

這是代碼筆的鏈接： http ://codepen.io/d4dilip/pen/rkxyA