使用 Angular JS 将简单函数转换为工厂或服务时遇到问题
Trouble converting a simple function to a Factory or Service using Angular JS
我已经在 SO 和网络上搜索了很长时间,但仍然找不到我的问题的正确答案。虽然有很多线程寻址函数向Factory/Service转换,none似乎适用于我目前的情况。我经常毫无问题地使用服务进行 setters/getters 和 $http 调用,所以我正在努力找出为什么我在将这个简单的函数转换为工厂或服务时遇到这么多麻烦。
我有一个 table 数据,我在 HTML 中使用以下代码对其进行分页:
<tr data-ng-repeat="book in filtered = (books | filter: query) | startFrom:currentPage*pageSize | limitTo:pageSize">
然后我使用一个简单的函数在 table 包含多个页面时显示 "Next" 按钮,并在只有一页或用户到达最后一页。我这样做使用 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;
}
};
这个函数本身在控制器中工作得很好,但是,我现在想在多个控制器中使用它。我的第一次尝试是使用工厂,所以我这样写:
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;
});
然后我将工厂作为我的控制器中的依赖项传递,并像这样调用它:
$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);
}
我得到了相同的结果,它不起作用但没有抛出任何错误。
总的来说,我真的只是试图将其用作我可以将参数传递给的控制器之间的共享函数。如上所示,其中一些参数将是控制器中的 $scope 变量。预先感谢您的帮助。
控制器中的实现存在问题
$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);
}
我已经在 SO 和网络上搜索了很长时间,但仍然找不到我的问题的正确答案。虽然有很多线程寻址函数向Factory/Service转换,none似乎适用于我目前的情况。我经常毫无问题地使用服务进行 setters/getters 和 $http 调用,所以我正在努力找出为什么我在将这个简单的函数转换为工厂或服务时遇到这么多麻烦。
我有一个 table 数据,我在 HTML 中使用以下代码对其进行分页:
<tr data-ng-repeat="book in filtered = (books | filter: query) | startFrom:currentPage*pageSize | limitTo:pageSize">
然后我使用一个简单的函数在 table 包含多个页面时显示 "Next" 按钮,并在只有一页或用户到达最后一页。我这样做使用 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;
}
};
这个函数本身在控制器中工作得很好,但是,我现在想在多个控制器中使用它。我的第一次尝试是使用工厂,所以我这样写:
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;
});
然后我将工厂作为我的控制器中的依赖项传递,并像这样调用它:
$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);
}
我得到了相同的结果,它不起作用但没有抛出任何错误。
总的来说,我真的只是试图将其用作我可以将参数传递给的控制器之间的共享函数。如上所示,其中一些参数将是控制器中的 $scope 变量。预先感谢您的帮助。
控制器中的实现存在问题
$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);
}