使用Angular JS

时间:2016-09-14 17:56:07

标签: javascript angularjs twitter-bootstrap angular-ui

我已经搜索了SO和网络很长一段时间但仍无法找到问题的正确答案。虽然有很多线程在解决工厂/服务转换的功能,但似乎没有一个适用于我目前的情况。我经常使用服务设置器/ getter和$ 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中运行良好,但是,我现在想在多个控制器中使用它。我的第一次尝试是使用工厂,所以我写了这个:

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;

});

然后我将Factory作为依赖项传递给我的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;
   }
 };

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

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

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

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

总的来说,我真的只是试图将它作为我可以传递参数的控制器之间的共享功能。其中一些参数将来自Controller的$ scope变量,如上所示。我事先感谢你的帮助。

1 个答案:

答案 0 :(得分:1)

问题出在控制器

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

$scope.showNext()没有返回任何内容,因此在视图中它始终会评估为undefined

添加return,以便服务函数返回的布尔值返回到控制器范围函数

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