Question

我在多个视图上使用angular-ui：bootstrap分页指令，这些视图与不同的控制器交互;这些视图/控制器通常必须与排序和过滤交互，这需要动态更新页面大小，例如：

              <pagination 
                on-select-page="setPage(page)" 
                items-per-page="pageSize" 
                boundary-links="true" 
                total-items="totalItems" 
                page="search.page" 
                max-size="maxVisiblePages" 
                class="pagination-sm"
                num-pages="numPages"
                previous-text="&lsaquo;" 
                next-text="&rsaquo;" 
                first-text="&laquo;" 
                last-text="&raquo;" 
                >
              </pagination>

在我的每个控制器中，我必须重新定义这些$ scope函数，例如：

      $scope.setPage = (page) ->
        $timeout ->
          $scope.search.page = page if $scope.search.page isnt page
          $scope.totalItems = $scope.matchedItems.length
          startIndex = (page - 1) * $scope.pageSize
          $scope.images = $scope.matchedItems.slice(startIndex, startIndex + $scope.pageSize)
          return
      $scope.sortMatches = ->
        $scope.matchedItems= $filter("orderBy")($scope.matchedItems, ['type','name'], true)
        $scope.setPage 1
        return
       ...

在避免控制器和视图中的代码重复的同时，给我这种排序/过滤/分页功能的最佳方法是什么？我想我可以创建一个安装$scope函数的类和另一个包含<pagination>指令的指令，但我不知道这是否是最佳选择。

Answer 1

Angular的一般规则是，如果您需要共享代码，它可以是服务或工厂。对于你的情况，我会去服务。例如，我有一个＆＃34;取消＆＃34;我在几个控制器中使用的服务：

  module.service "cancelService", ($location) ->
    @cancel = ->
      if (/#/.test($location.$$path))
        $location.path($location.$$path.replace(/#.*/, "##{moment()}"))
      else
        $location.path($location.$$path += "#" + moment());
    @

  module.controller('adminUserEdit', ["$scope", '$route',"$location", '$stateParams', "userService",'roleService', 'cancelService', ($scope, $route, $location, $stateParams, userService, roleService, cancelService) -> 
    $scope.cancel = cancelService.cancel

这样我有一行将cancelService函数拉入任何需要取消的控制器。

Angular：使用Angular-UI分页保持干燥？

1 个答案: