dirPagination 不起作用（Angular JS 分页）答案

【问题标题】：dirPagination does not work (Angular JS pagination)dirPagination 不起作用（Angular JS 分页）
【发布时间】：2016-11-17 20:34:10
【问题描述】：

我正在尝试使用dirPagination，但它不起作用。查看我的实际代码：http://plnkr.co/edit/18BxNhHRNyRoI17sBGQF?p=preview

我的代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<script>
var myApp = angular.module('myApp', [])
    .controller('PsCtrl', ['$scope', function ($scope) {
        $scope.data = [
            {a:1, b:1},
            {a:2, b:2},
            {a:3, b:3}
        ];
    }]);
</script>


<script src="dirPagination.js"></script>
</head>
<body>

<div ng-controller="PsCtrl">
    ItemCount: {{data.length}}
    <ul>
        <li dir-paginate="item in data | itemsPerPage: 2">{{ item }}</li>
    </ul>
    <dir-pagination-controls></dir-pagination-controls>
</div>
</body>
</html>

我只得到这个作为输出：

ItemCount: 3
  ⋅

但我希望底部有分页控件，并将此输出作为第一页：

ItemCount: 3
⋅ {"a":1,"b":1}
⋅ {"a":2,"b":2}

当我使用<li ng-repeat="item in data">{{ item }}</li> 时，它会显示正确的列表。

我做错了什么？

【问题讨论】：

标签： angularjs angularjs-directive dirpagination

【解决方案1】：

运行 plnkr 所需的只是将 dirPaginate 包含到 Angular 模块中：

var myApp = angular.module('myApp', ['angularUtils.directives.dirPagination'])

并将 dirpagination.js:155 中分页 HTML 模板的路径更改为

templateUrl:  'dirPagination.tpl.html',

【讨论】：

【解决方案2】：

从这里下载dirPagination.js。
现在将 dirPagination.js 包含到您的页面中。
像这样在你的模块中添加 angularUtils.directives.dirPagination

var app = angular.module("myApp",['angularUtils.directives.dirPagination']);

我们使用dir-paginate指令进行分页，在tr标签中添加dir-paginate

<tr dir-paginate="event in events|orderBy:['id', 't']:true | itemsPerPage: 5">

在您页面的任何位置或您想要的任何位置添加以下给定代码。

<dir-pagination-controls
                max-size="5"
                direction-links="true"
                boundary-links="true" >
</dir-pagination-controls>

【讨论】：