AngularJS 1.6应用程序错误:将项目分页转换为服务不起作用 [英] AngularJS 1.6 application bug: turning items pagination into a service does not work
问题描述
我正在使用Bootstrap 4和 AngularJS v1.6.6 制作一个小的 Contacts应用程序.
I am making a small Contacts application with Bootstrap 4 and AngularJS v1.6.6.
该应用程序仅显示 Users JSON.由于JSON返回了大量用户,因此该应用程序还具有分页功能.
The application simply displays an Users JSON. Since the JSON returns a large number of users, the application also has a pagination feature.
作为应用程序控制器的一部分,分页效果很好,但是由于我试图将其转换为服务,因此它不再起作用.
The pagination worked fine as part of the app's controller, but since I tried to turn it into a service, it does not work anymore.
See a functional version of the application, with the pagination inside the controller HERE.
应用程序控制器:
// Create an Angular module named "contactsApp"
var app = angular.module("contactsApp", []);
// Create controller for the "contactsApp" module
app.controller("contactsCtrl", ["$scope", "$http", "$filter", "paginationService", function($scope, $http, $filter) {
var url = "https://randomuser.me/api/?&results=100&inc=name,location,email,cell,picture";
$scope.contactList = [];
$scope.search = "";
$scope.filterList = function() {
var oldList = $scope.contactList || [];
$scope.contactList = $filter('filter')($scope.contacts, $scope.search);
if (oldList.length != $scope.contactList.length) {
$scope.pageNum = 1;
$scope.startAt = 0;
};
$scope.itemsCount = $scope.contactList.length;
$scope.pageMax = Math.ceil($scope.itemsCount / $scope.perPage);
};
$http.get(url)
.then(function(data) {
// contacts arary
$scope.contacts = data.data.results;
$scope.filterList();
// Pagination Service
$scope.paginateContacts = function(){
$scope.pagination = paginationService.paginateContacts();
}
});
}]);
服务:
app.factory('paginationService', function(){
return {
paginateContacts: function(){
// Paginate
$scope.pageNum = 1;
$scope.perPage = 24;
$scope.startAt = 0;
$scope.filterList();
$scope.currentPage = function(index) {
$scope.pageNum = index + 1;
$scope.startAt = index * $scope.perPage;
};
$scope.prevPage = function() {
if ($scope.pageNum > 1) {
$scope.pageNum = $scope.pageNum - 1;
$scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
}
};
$scope.nextPage = function() {
if ($scope.pageNum < $scope.pageMax) {
$scope.pageNum = $scope.pageNum + 1;
$scope.startAt = ($scope.pageNum - 1) * $scope.perPage;
}
};
}
}
});
在视图中:
<div ng-if="pageMax > 1">
<ul class="pagination pagination-sm justify-content-center">
<li class="page-item"><a href="#" ng-click="prevPage()"><i class="fa fa-chevron-left"></i></a></li>
<li ng-repeat="n in [].constructor(pageMax) track by $index" ng-class="{true: 'active'}[$index == pageNum - 1]">
<a href="#" ng-click="currentPage($index)">{{$index+1}}</a>
</li>
<li><a href="#" ng-click="nextPage()"><i class="fa fa-chevron-right"></i></a></li>
</ul>
</div>
服务文件包含在项目中(我认为正确)在app.js
文件之后:
The service file is included in the project (correctly, in my opinion) after the app.js
file:
<script src="js/app.js"></script>
<script src="js/paginationService.js"></script>
我不是AngularJS的高级用户,所以我不知道:缺少什么?
I am not an advanced AngularJS user so I don't know: what is missing?
推荐答案
看来,该服务需要在控制器之前定义,否则无法正确注入.
It appears that the service needs to be defined before the controller, otherwise it cannot be injected properly.
因此您可以将paginationService
移到app.js
:
var app = angular.module("contactsApp", []);
app.factory('paginationService', function(){
//...
});
app.controller("contactsCtrl", ["$scope", "$http", "$filter", "paginationService", function($scope, $http, $filter) {
//...
});
否则,将控制器移到paginationServices.js
文件之后包含的单独文件中.
Or else move the controller out to a separate file that is included after the paginationServices.js
file.
看看这个小矮人.尝试修改第6行-删除字符5,即用空格分隔星号和斜线,以关闭多行注释.
Take a look at this plunker. Try modifying line 6 - remove character 5, i.e. the space that separates the star and slash that would close the multi-line comment.
这篇关于AngularJS 1.6应用程序错误:将项目分页转换为服务不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!