<ion-infinite-scroll> 连续调用

Question

我正在使用 ionic 开发一个新闻应用程序。对于不同类别的新闻，我使用相同的模板文件和控制器功能。我的控制器功能如下。我正在使用 ion-infinite-loop 来检索旧消息，我的回调函数是 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>

这是我的 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

请尝试以下操作：

一些不同但正确的方法：

Contoller.js

.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');
     }) 
    };

}]);

在 factory.js 中

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

在 html 中

<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

app.js

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();
}
});
})

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');
                })
            };

  }]);