如何将引导 UI 分页与 AngularJS 1.6 组件一起使用

Question

我想像这个链接一样进行分页 如何使用 UI 引导分页来生成使用 ng-repeat 生成的表

我已经阅读了这里的文档 https://angular-ui.github.io/bootstrap/#!#getting_started ng-model="pageNumber"，但我不知道"此设置应用了一个角度$watch侦听器"是什么意思，例如，ng-model 有一个$watch侦听器。

我正在使用组件。侦听器是什么意思$watch以及如何在组件中使用$watch。 甚至有可能还是有不同的方法？查看我的 plunker 以获取所有代码。https://plnkr.co/edit/E2dKJx2PB1BXsE9hFkte?p=preview

预订清单.html

<ul 
uib-pagination
ng-model="$ctrl.currentPage" 
items-per-page="$ctrl.itemsPerPage" 
total-items="$ctrl.bookings.length" 
max-size="$ctrl.maxSize">
</ul>
<table>
...
<tr ng-repeat="booking in $ctrl.bookings">
...
</tr>
</tbody>
</table>

我应该怎么做才能完成这项工作？

app.component('bookingList', {
templateUrl: 'booking-list.html',
controller: ['BookingSvc', function(BookingSvc) {
let self = this;
self.bookings = BookingSvc.query();
self.maxSize = 2;
self.currentPage = 1;
self.itemsPerPage = 2;
// what should I do to make this work?
/*$scope.$watch("currentPage", function() {
setPagingData(self.currentPage);
});
function setPagingData(page) {
let pagedData = self.bookings.slice(
(page - 1) * self.itemsPerPage,
page * self.itemsPerPage
);
self.pagedBookings = pagedData;
}*/
}]
});

Answer 1

使用$doCheck生命周期钩

子在1.5.8 版本中，AngularJS 将$doCheck生命周期钩子添加到$compile服务中。

从文档中：

控制器可以提供以下充当生命周期挂钩的方法：

• $doCheck()- 在消化周期的每个回合调用。提供检测更改并采取行动的机会。您希望为响应检测到的更改而采取的任何操作都必须从此挂钩调用;实现这一点对调用$onChanges的时间没有影响。例如，如果您希望执行深度相等性检查或检查 Date 对象，则此钩子可能很有用，Angular 的更改检测器不会检测到其更改，因此不会触发$onChanges。调用此钩子时没有参数;如果检测到更改，则必须存储以前的值，以便与当前值进行比较。

--AngularJS 综合指令 API 参考 -- 生命周期钩子