AngularJS 1.6 应用程序错误：将项目分页转换为服务不起作用答案

【问题标题】：AngularJS 1.6 application bug: turning items pagination into a service does not workAngularJS 1.6 应用程序错误：将项目分页转换为服务不起作用
【发布时间】：2019-05-09 23:58:41
【问题描述】：

我正在使用 Bootstrap 4 和 AngularJS v1.6.6 制作一个小型 Contacts 应用程序。

应用程序只显示一个 Users JSON。由于 JSON 返回大量用户，应用程序还具有分页功能。

分页作为应用程序控制器的一部分运行良好，但由于我试图将其转换为服务，所以它不再运行了。

查看应用程序的功能版本，控制器内有分页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 文件之后：

<script src="js/app.js"></script>
<script src="js/paginationService.js"></script>

我不是高级 AngularJS 用户，所以我不知道：缺少什么？

【问题讨论】：

“不起作用”没有帮助。告诉我们预期的行为应该是什么。告诉我们错误消息的确切措辞是什么，以及产生它的代码行。在问题的标题中简要说明问题。
@georgeawg 应该是 this one。
首先打开开发者控制台并发现错误消息。
Injecting $scope into an angular service function() 可能重复。

标签： javascript angularjs dependency-injection bootstrap-4

【解决方案1】：

看来需要在控制器之前定义服务，否则无法正常注入。

所以您可以将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 文件之后的单独文件中。

看看this plunker。尝试修改第 6 行 - 删除字符 5，即分隔星号和斜杠的空格，这将关闭多行注释。

【讨论】：