我正在使用angular ng-simplepaginator,我已经为selectbox实现了自定义指令。
.directive('sel',['onChangeService', function(onChangeService) {
return {
template: '<select class="span2" ng-model="itemsPerPage" ng-options="obj as obj for obj in itemsPerPageList" data-style="btn-primary" bs-select></select>',
restrict: 'E',
scope: {
itemsPerPage: '=',
totalitems: '=totalitems'
},
link: function (scope, elem, attrs) {
scope.itemsPerPageList = ['All','10','20','30','40'];
scope.itemsPerPage = scope.itemsPerPageList[1];
},
controller: function ($scope, $element) {
$scope.$watch('itemsPerPage', function () {
onChangeService.changePager($scope, $scope.itemsPerPage, $scope.totalitems.length);
});
}
};
}]);
tellerApp.factory('onChangeService', function ($rootScope, Pagination) {
return {
changePager: function($scope,itemsPerPage,totalLength) {
$scope.pagination = Pagination.getNew(itemsPerPage);
$scope.pagination.numPages = Math.ceil(totalLength/$scope.pagination.perPage);
}
}
});
我可以调用service inside指令,但页面值不会更新。
例如,当我选择20个项目时,值不会更新。 (即pagination.numPages,pagination.page值未更新)
<ul class="pagination">
<li ng-class="pagination.firstPageDisabled()"><a href="javascript:void(0)" ng-click="pagination.firstPage()">First</a></li>
<li><a href="javascript:void(0)" ng-click="pagination.prevPage()">«</a></li>
<li ng-repeat= "n in pagination.range(pagination.numPages, pagination.page, pagination.page+pagination.gap)" ng-class="{active: n == pagination.page}">
<a href="javascript:void(0)" ng-click="pagination.toPageId(n)">{{n + 1}}</a>
</li>
<li><a href="javascript:void(0)" ng-click="pagination.nextPage()">»</a></li>
<li ng-class="pagination.lastPageDisabled()"><a href="javascript:void(0)" ng-click="pagination.lastPage()">Last</a></li>
</ul>