<ion-infinite-scroll>调用continuous
<ion-infinite-scroll>调用continuous
提问于 2016-09-28 13:47:07
我正在开发一个使用ionic的新闻应用程序。对于不同类别的新闻，我使用相同的模板文件和控制器函数。下面给出了我的控制器函数。我使用离子无限循环来检索旧新闻，我的回调函数是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')
});回答 3
Stack Overflow用户
发布于 2016-09-28 14:40:42
如果没有更多可用的数据，则删除更多负载，并将距离值增加到"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');
});
};Stack Overflow用户
发布于 2016-09-28 14:58:41
请尝试以下操作：
一些不同但合适的方法：
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');
})
};
}]);factories.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>Stack Overflow用户
发布于 2016-09-28 18:28:59
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');
})
};
}]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39738938
复制相关文章
相似问题
腾讯云开发者
