Angular JS：使用分页指令 JS 分页而不使用 Pagination.tpl.html 模板

Question

我是分页新手，我发现 this 指令在我阅读的内容中受到 Angular JS 的高度追捧。我正在尝试实现分页以使用我创建的自定义分页 html/css 布局。

由于页数显示正确，并且显示的项目数按照我指定的正确，分页略有作用。但是，问题是单击分页列表中的例如第 2 页不会加载下一个包含 5 个项目的列表。它只是停留在同一个列表上。

我有点困惑如何正确使用该指令的所有部分，所以我认为我在执行该指令时做错了。

我关注的指南位于here，与上面的存储库相同。

下载文件并添加到项目中：

dirPagination.js

我的 HTML 如下：

<div id="pages" ng-if="1 < pages.length || !autoHide">
  <span ng-class="{ active : pagination.current == pageNumber,
      disabled : pageNumber == '...' }" class="pagenumber" 
      dir-paginate="pageID in controller.list| filter:q | itemsPerPage:
      controller.pageCount" current-page="controller.currentPage">
    <a href="" ng-click="setCurrent(pageID)">{{ pageID.id }}</a>
  </span>
</div>

<div class="myResults" dir-paginate="results 
  in controller.list| filter:q | itemsPerPage: 5" current-page="1">
    <div class="listFigures">
        <figure class="imageList">
            <img ng-src="{{results.image}}" ng-alt=
              {{results.imageAlt}}" ng-title=
              {{results.imageTitle}}" />
        </figure>
    </div>
</div>

在我的控制器中，我根据项目数量设置了 pageCount（它用作参数并用于显示现在有多少页）：

vm.pageCount=2;
vm.currentPage = 1;

工作：

• 页面列表正在显示，按照上面的代码，您会看到它有 8 页。
• 仅显示 5 个项目

不工作：

• 单击另一个页面（在本例中为 2）不会将我带到另一个数据页面。列表不会刷新。单击另一个页码会显示相同的 5 个项目列表。共有 8 个项目，显示 5 个，点击第 2 页应该显示最后 3 个。

研究过的帖子：

• dirPagination does not work (Angular JS pagination)

• Pagination with AngularJS?

• dir-pagination directive angularjs : is there any way I can get all the records of current page in pagination?

如果我的实现完全关闭，我对如何使其正常工作感到困惑。我已经阅读了一些帖子，并尝试按照存储库中的指南进行操作，但我不明白如何正确使用它。我有兴趣了解如何使用自定义 html/css 而不是使用 dirPagination.tpl.html template 来实现此分页指令。

遵循最佳实践，您可以阅读 here 了解标准 Angular。

Answer 1

在 Plunker 上拆开代码后找到here 以及下载指令dirPagination.tpl.html 附带的模板，我发现如何在不使用模板的情况下成功使用。你不能跳过任何东西。必须使用列表必须使用模板提供的大部分标签，这些标签与dirPagination.js 一起使用。

这是有效的解决方案。唯一需要更改的是 html：

<div class="results">
  <dir-pagination-controls  on-page-change="pageChangeHandler(newPageNumber)">
  </dir-pagination-controls>

  <div class="pages" ng-if="1 < pages.length || !autoHide"
      class="pagenumber pagination" dir-paginate="pageID in
      controller.list| filter:q | itemsPerPage:5"
      ng-class="{ active : pagination.current == pageNumber, disabled :
      pageNumber == '...' }">
    <ul class="pagination" ng-if="1 < pages.length || !autoHide">
      <li ng-repeat="pageNumber in pages track by tracker(pageNumber,
          $index)" ng-class="{ active : pagination.current == 
          pageNumber, disabled : pageNumber == '...' }">
        <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }} 
        </a>
      </li>
    </ul>
  </div>
</div>

随意复制文档中的所有 html 并使用我创建的类：

• 结果
• 页
• 分页

随心所欲地更改 CSS。

注意：分页类不能被删除，即使你把它从你的html中取出，如果你在浏览器上运行页面时检查你的元素，你会看到它被自动放回.

临时说明：当我弄清楚如何在上述标签（例如 h1）中显示页数时，我会将其添加到我的答案中。

Answer 2

您在最后的指令中硬编码了当前页面：

<div class="myResults" dir-paginate="results in controller.list| filter:q | itemsPerPage: 5" current-page="1">

要使其正常工作，您需要将其设置为保存当前页面的变量。您可以将您的代码与分页指令http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview 在第 42 行提供的 plunker 进行比较。