<이온 - 무한 스크롤> 연속 통화

Question

이온을 사용하는 뉴스 앱을 개발 중입니다. 뉴스의 다른 종류를 위해 나는 동일한 템플렛 파일과 관제사 기능을 사용하고있다. 내 컨트롤러 기능은 아래와 같습니다. 이전 뉴스를 검색하기 위해 이온 무한 루프를 사용하고 있습니다. 콜백 함수는 loadMore()입니다. 처음으로 카테고리를 호출하면 코드가 정상적으로 작동하지만 다른 카테고리를 동일한 시간에 loadMore()를 호출하면 무한 루프가 계속해서 호출됩니다.

.controller('categoryCtrl', ['$scope', '$http', '$stateParams', '$location', '$state', 
     function ($scope, $http, $stateParams, $location, $state, $ionicHistory) { 

      $scope.category = $location.path().split('/')[2]; 
      $scope.articles = []; 
      $scope.last_id = 0; 
      $http({ 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
       data: {'path': $location.path(), 'id': ''}, 
       method: 'POST', 
       url: 'http://www.example.com/article/mobile_api/category', 
      }).success(function (newsData) { 

       angular.forEach(newsData, function (newsArticle) { 
        $scope.articles.push(newsArticle); 
        $scope.last_id = newsArticle.article_id; 
       }); 
      }).error(function (data) { 
       alert('Warning! Home Page Request failed'); 
      }); 
      $scope.loadMore = function() { 
       $http({ 
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
        data: {'path': $location.path(), 'id': $scope.last_id}, 
        method: 'POST', 
        url: 'http://www.example.com/article/mobile_api/category', 
       }).success(function (newsData) { 

        angular.forEach(newsData, function (newsArticle) { 
         $scope.articles.push(newsArticle); 
         $scope.last_id = newsArticle.article_id; 
        }); 

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

       }); 
      }; 

     }]); 

HTML 코드는

<ion-content class="has-header bar-positive" padding="true"> 

    <div class="list" ng-repeat="item in articles" style="margin-bottom: 5px;"> 
     <a ng-click=""> 
      <div class="row" > 
       <div class="col col-25"> <img width="100%" src="{{pic_path}}{{item.pic_name}}"></div> 
       <div class="col col-75 "><p class="item-body">{{item.article_name}}</p>       
      </div> 

     </a> 
    </div> 

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

여기

아래 아니 더 많은 데이터를 사용할 수와 증가하는 경우 MY route.js

angular.module('app.routes', []) 
.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 
.state('example.technology', { 
url: '/technology', 
views: { 
'side-menu21': { 
templateUrl: 'templates/category.html', 
controller: 'categoryCtrl' 
} 
} 
}) 
.state('example.wolrd', { 
url: '/world', 
views: { 
'side-menu21': { 
templateUrl: 'templates/category.html', 
controller: 'categoryCtrl' 
} 
} 
}) 
$urlRouterProvider.otherwise('/side-menu21/home') 
}); 

Answer 1

제거 용지를 더 거리 값 전자를 "2 %"

<div class="list" ng-repeat="item in articles" style="margin-bottom: 5px;"> 
    <a ng-click=""> 
     <div class="row" > 
      <div class="col col-25"> <img width="100%" src="{{pic_path}}{{item.pic_name}}"></div> 
      <div class="col col-75 "><p class="item-body">{{item.article_name}}</p>       
     </div> 

    </a> 
</div> 

<ion-infinite-scroll 
    ng-if="moreDataAvailable" 
    on-infinite="loadMore()" 
    distance="2%"> 
</ion-infinite-scroll> 

컨트롤러

.controller('categoryCtrl', ['$scope', '$http', '$stateParams', '$location', '$state', 
     function ($scope, $http, $stateParams, $location, $state, $ionicHistory) { 

      $scope.category = $location.path().split('/')[2]; 
      $scope.articles = []; 
      $scope.last_id = 0; 
      $http({ 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
       data: {'path': $location.path(), 'id': ''}, 
       method: 'POST', 
       url: 'http://www.example.com/article/mobile_api/category', 
      }).success(function (newsData) { 

       angular.forEach(newsData, function (newsArticle) { 
        $scope.articles.push(newsArticle); 
        $scope.last_id = newsArticle.article_id; 
       }); 
      }).error(function (data) { 
       alert('Warning! Home Page Request failed'); 
      }); 
      $scope.loadMore = function() { 
       $http({ 
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
        data: {'path': $location.path(), 'id': $scope.last_id}, 
        method: 'POST', 
        url: 'http://www.example.com/article/mobile_api/category', 
       }).success(function (newsData) { 
    // set it to false if no more data to load 
    if(!newsData){ 
    $scope.moreDataAvailable = false; 
    } 
        angular.forEach(newsData, function (newsArticle) { 
         $scope.articles.push(newsArticle); 
         $scope.last_id = newsArticle.article_id; 
        }); 

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

       }); 
      }; 

Answer 2

다음 시도하십시오 :

약간 다른 접근하지만 적절한 하나를

공동 ntoller.js factories.js HTML에서

.factory('getData', function($http) { 
    return { 
    getAllData: function(id) { 
     return $http.get('http://www.example.com/article/mobile_api/category?id=' + id); 
    } 
    } 
}) 

에

.controller('categoryCtrl', ['$scope', '$http', '$stateParams', '$location', '$state', 
function ($scope, $http, $stateParams, $location, $state, $ionicHistory, getData) { 

    $scope.category = $location.path().split('/')[2]; 
    $scope.articles = []; 
    $scope.last_id = 0; 
    $scope.app.loadMoreData = true; 


    $scope.loadMore = function() { 
    var id = $scope.last_id; 
    getData.getAllData(id).then(function(result){ 
     if(!result){ 
      $scope.app.loadMoreData = false; 
      return; 
     } 
     angular.forEach(newsData, function (newsArticle) { 
      $scope.articles.push(newsArticle); 
      $scope.last_id = newsArticle.article_id; 
     }) 
     $scope.$broadcast('scroll.infiniteScrollComplete'); 
    }) 
    }; 

}]); 

는

<ion-infinite-scroll 
    ng-if="app.loadMoreData" //set in scope as false if no data is retrun in api 
     on-infinite="loadMore()" 
     distance="1%"> 
    </ion-infinite-scroll> 
</ion-content> 

Answer 3

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.directives','app.services',]) 
.run(function($ionicPlatform) { 
$ionicPlatform.ready(function() { 
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
// for form inputs) 
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { 
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    cordova.plugins.Keyboard.disableScroll(true); 
} 
if (window.StatusBar) { 
    // org.apache.cordova.statusbar required 
    StatusBar.styleDefault(); 
} 
}); 
}) 

,745을 app.js

services.js

angular.module('app.services', []) 

.factory('getData', [function($http){ 
return { 
getAllData: function(id) { 
     return $http.get('http://localhost/article/mobile_api/category?id=' + id); 
} 
} 
}]); 

controller.js

angular.module('app.controllers', []) 
.controller('categoryCtrl', ['$scope', '$http', '$stateParams', '$location', '$state', // 
function ($scope, $http, $stateParams, $location, $state, $ionicHistory,getData) { 



      $scope.articles = []; 
      $scope.last_id = 0; 
      $scope.loadMoreData = true; 


      $scope.loadMore = function() { 
       var id = $scope.last_id; 
       getData.getAllData(id).then(function (result) { 
        if (!result) { 
         $scope.app.loadMoreData = false; 
        } 
        angular.forEach(result, function (newsArticle) { 
         $scope.articles.push(newsArticle); 
         $scope.last_id = newsArticle.article_id; 
        }) 
        $scope.$broadcast('scroll.infiniteScrollComplete'); 
       }) 
      }; 

    }]);