Ионный бесконечный свиток не работает на всех устройствах Android.

Question

Я сейчас разрабатываю ионное приложение и успешно реализовал бесконечную функцию прокрутки. Он отлично работает на настольных браузерах и более новых устройствах для Android, однако у меня проблемы с телефонами, на которых установлена ​​версия Android версии 4.1 или меньше.

Проблема:

Я открываю страницу, он загружает и отображает первые 20 пунктов просто отлично, я перейдите к нижней части, следующей загрузке 20 пунктов, но это не дает мне прокручивать любого далее, чтобы увидеть следующие 20 предметов.

Вот GIF, показывающий, как он выглядит на моем рабочем столе (как он должен работать). desktop gif

Вот еще один GIF, показывающий, как это выглядит на моем XPERIA телефона (обратите внимание, как она не позволяет мне прокрутить далее вновь загруженных элементов). xperia gif

Однако, когда я обновить страницу или превратить телефон в ландшафтном режиме после следующих 20 элементов, загруженных, скроллинг работает просто отлично, так что кажется, что телефон не знает, что высота экрана изменяется при новые предметы загружены, поэтому я подумал, что могу исправить это, просто добавив $ionicScrollDelegate.resize();, чтобы рассказать, чтобы пересчитать размер его контейнера, но это, похоже, не исправляет его.

Вот мой код JavaScript:

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) { 
    $scope.items = []; 
    $scope.page = 1; 
    $scope.totalPages = 1; 


    $scope.loadMore = function() { 
    if ($scope.page <= $scope.totalPages) { 
     $http.get('http://localhost/test/recent/' + $scope.page).success(function(items) { 
     var i = items.data.length; 
     $scope.totalPages = items.pages; 
     $scope.items = $scope.items.concat(items.data); 

     $scope.$broadcast('scroll.infiniteScrollComplete'); 

     $scope.page = $scope.page + 1; 
     if ($scope.page == $scope.totalPages + 1) { 
      $scope.noMoreItemsAvailable = true; 
     } 
     }); 
    } 
    } 
}]) 

HTML:

<ion-view view-title="Hello Stackoverflow"> 
    <ion-content> 

    <a class="item" ng-repeat="item in items"> 
     {{item.title}} 
     <span class="item-note"> 
      {{ item.timestamp | myDate }} 
     </span> 
    </a> 

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

Я застрял с этой проблемой for2 дней, гуглом в течение нескольких часов и попробовал много разных вещей, но я не мог найти ничего, что фиксировало бы это.

Answer 1

Использовать collection-repeat вместо ng-repeat. Это не похоже на то, что Ionic с ng-repeat освежает вид.

Answer 2

Я нашел обходной путь ... Изменить от этого

<ion-content> 

в

<ion-content overflow-scroll='false'> 

отключить родную прокрутку в данном представлении.