javascript - 使用 Angular JS 将简单函数转换为工厂或服务时遇到问题

Question

我已经在 SO 和网络上搜索了很长时间，但仍然找不到我的问题的正确答案。尽管有很多线程将函数寻址到工厂/服务转换，但似乎没有一个适用于我当前的情况。我经常使用服务来进行 setter/getters 和 $http 调用，没有任何问题，所以我很难找出为什么我在将这个简单的函数转换为工厂或服务时遇到如此多的麻烦。

我有一个数据表，我在 HTML 中使用以下代码对其进行分页:

<tr data-ng-repeat="book in filtered = (books | filter: query) | startFrom:currentPage*pageSize | limitTo:pageSize">

然后，我使用一个简单的函数来在表格包含多个页面时显示“下一步”按钮，并在只有一页或用户已到达最后一页时隐藏该按钮。我这样做是使用 ng-show="showNext(filtered)" 。该函数如下所示:

 $scope.showNext = function(filtered){

 var numPages = Math.ceil($scope.data.length/$scope.pageSize),
     lastPage = $scope.currentPage+1;

 if(filtered.length > $scope.pageSize && lastPage < numPages){
   return true;
 }else if(filtered.length > $scope.pageSize && lastPage === numPages){
   return false;
 }else{
   return false;
 }
};

这个函数本身在 Controller 中运行得很好，但是，我现在想跨多个 Controller 使用它。我的第一次尝试是使用工厂，所以我写了这个:

app.factory('PaginationService', function(){

var pagination = {};

pagination.showNext = function(data, pageSize, currentPage, filtered){
  var numPages = Math.ceil(data.length/pageSize),
      lastPage = currentPage+1;

  if(filtered.length > pageSize && lastPage < numPages){
    return true;
  }else if(filtered.length > pageSize && lastPage === numPages){
    return false;
  }else{
    return false;
  }
};

return pagination;

});

然后我将工厂作为 Controller 中的依赖项传递，并像这样调用它:

$scope.currentPage = 0;
$scope.pageSize = 10;

$scope.showNext = function(filtered){
  PaginationService.showNext(data, $scope.pageSize, $scope.currentPage, filtered);
}

不幸的是，它不起作用，但没有抛出任何错误，因此我无法诊断原因。

我也尝试过将其设为这样的服务:

 this.showNext = function(data, pageSize, currentPage, filtered){
   var numPages = Math.ceil(data.length/pageSize),
       lastPage = currentPage+1;

   if(filtered.length > pageSize && lastPage < numPages){
     return true;
   }else if(filtered.length > pageSize && lastPage === numPages){
     return false;
   }else{
     return false;
   }
 };

然后我将服务作为依赖项传递，并在我的 Controller 中调用它，如下所示:

$scope.currentPage = 0;
$scope.pageSize = 10;

$scope.showNext = function(filtered){
  MyService.showNext(data, $scope.pageSize, $scope.currentPage, filtered);
}

我得到了相同的结果，它不起作用，但没有抛出错误。

总的来说，我实际上只是尝试将其用作我可以向其传递参数的 Controller 之间的共享函数。其中一些参数将是 Controller 中的 $scope 变量，如上所示。我预先感谢您的帮助。

Answer 1

问题在于 Controller 的实现

$scope.showNext = function(filtered){
  PaginationService.showNext(data, $scope.pageSize, $scope.currentPage, filtered);
}

从 $scope.showNext() 没有返回任何内容，因此在 View 中它将始终评估为 undefined

添加return，以便服务函数返回的 bool 值返回到 Controller 作用域函数

$scope.showNext = function(filtered){
   return  PaginationService.showNext(data, $scope.pageSize, $scope.currentPage, filtered);
}