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

Question

我新的分页，我发现this指令，它是高度角为JS之后，从我读追捧。我试图实现分页与我创建的自定义分页html/css布局一起工作。

分页slighlty的工作原理是页面显示正确，显示的项目数量是正确的，正如我指定的。然而，问题是点击例如分页列表中的第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> 

在我的控制器我有一个基于它是如何许多项目（使用页页次集作为参数并且用于显示现在有多少页）

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

工作：

• 页面列表中显示，以下上面的代码中，你会看到它是在8页。另一页上
  • 点击（在这种情况下，2）不带我去另一页数据：
  • 只有5项显示指示

  不工作。该列表不会刷新。点击另一个页码可以显示5个相同的列表。总共有8个项目，其中5被显示在第二页点击数应显示在过去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?

我是如何得到这个工作，以及如果我的实现是完全关闭很困惑。我已经阅读了几篇文章，并尝试按照存储库中的指南进行操作，但是我不了解如何正确使用它。任何帮助是极大的赞赏。如果您可以举出一个很好的示例来展示如何使用每一种解决方案，并解释我相信这也有利于Angular JS的新开发人员尝试使用他们的自定义html/css实现此分页指令，而不是使用dirPagination.tpl.html template。

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

Answer 1

您在指令末硬编码您的当前位置：

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

得到它的工作，你需要将其设置为保存当前页面的变量。您可以将您的代码比较由分页指令http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview在42行

Answer 2

提供采摘分开放在Plunker代码之后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。

Note：如果您在浏览器上运行该页面时检查了元素，即使您将它从HTML中取出，也无法删除分页类，您将看到它自动放回。

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