uib-pagination 不工作 Angularjs

Question

编辑！

添加了更多代码 sn-ps 和 plunker 更新（再次）

对于 Angular 和一般的编码来说还是很新的。

我已经尝试并尝试从Angular Directives 网站实例化 UI 分页。我搜索了 Stack Overflow 和 codeProject 以及其他各种网站。我一辈子都无法让我的分页工作。

我不知道还能尝试什么。我很确定我已经调用了足够多的属性

<uib-pagination
    items-per-page="itemsPerPage"
    ng-model="currentPage"
    max-size="maxSize"
    class="pagination-sm"
    next-text="&raquo;"
    previous-text="&laquo;"
    boundary-links="false" >
</uib-pagination>

并运行控制器：

app.controller('PaginationControl',function ($scope,  $window) {
    // Pagination variables
    $scope.totalItems = 100; //this needs to be changed to represent the total of filtered parks after a search is done and NOT a static number.
    $scope.currentPage = 1;
    $scope.maxSize = 8;
    $scope.itemsPerPage = 10;

});

我不明白的是如何根据我的搜索结果将分页属性从控制器中硬编码的静态数字更改为动态数字。

这是一个 Plunker，除了分页功能之外，它什么都可以工作。

非常感谢

Answer 1

您的 plunk 存在一些问题。您引用了 bootstrap.js 文件而不是 bootstrap.css 文件。您引用了 1.4.5 版的 Angular 核心库和 1.4.7 版的 Angular 动画库。您引用 jQueryUI 但不引用 jQuery。您没有在分页指令上设置 total-items 属性。这是一个更新的plunk，其中显示了分页。更新参考块：

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>