如何将 bootstrap ui 分页与 angularjs 1.6 组件一起使用
how do I use bootstrap ui pagination with angularjs 1.6 component
我想像这样进行分页 link
我已阅读此处的文档 https://angular-ui.github.io/bootstrap/#!#getting_started
ng-model="pageNumber"，但不知道'This setting has an angular $watch listener applied to it'是什么意思，比如ng-model有个$watch监听器。
我正在使用组件。 $watch 监听器是什么意思以及如何在组件中使用 $watch。甚至有可能还是有不同的方法？
查看我的 plunker 以获取所有代码。
https://plnkr.co/edit/E2dKJx2PB1BXsE9hFkte?p=preview
预订-list.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;
}*/
}]
});
使用 $doCheck 生命周期挂钩
使用 1.5.8 版，AngularJS 向 $compile 服务添加了 $doCheck 生命周期挂钩。
来自文档：
The controller can provide the following methods that act as life-cycle hooks:
$doCheck() - Called on each turn of the digest cycle. Provides an opportunity to detect and act on changes. Any actions that you wish to take in response to the changes that you detect must be invoked from this hook; implementing this has no effect on when $onChanges is called. For example, this hook could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not be detected by Angular's change detector and thus not trigger $onChanges. This hook is invoked with no arguments; if detecting changes, you must store the previous value(s) for comparison to the current values.
--AngularJS Comprehensive Directive API Reference -- Life-cycle hooks
我想像这样进行分页 link
我已阅读此处的文档 https://angular-ui.github.io/bootstrap/#!#getting_started ng-model="pageNumber"，但不知道'This setting has an angular $watch listener applied to it'是什么意思，比如ng-model有个$watch监听器。
我正在使用组件。 $watch 监听器是什么意思以及如何在组件中使用 $watch。甚至有可能还是有不同的方法？ 查看我的 plunker 以获取所有代码。 https://plnkr.co/edit/E2dKJx2PB1BXsE9hFkte?p=preview
预订-list.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;
}*/
}]
});
使用 $doCheck 生命周期挂钩
使用 1.5.8 版，AngularJS 向 $compile 服务添加了 $doCheck 生命周期挂钩。
来自文档：
The controller can provide the following methods that act as life-cycle hooks:
$doCheck()- Called on each turn of the digest cycle. Provides an opportunity to detect and act on changes. Any actions that you wish to take in response to the changes that you detect must be invoked from this hook; implementing this has no effect on when$onChangesis called. For example, this hook could be useful if you wish to perform a deep equality check, or to check a Date object, changes to which would not be detected by Angular's change detector and thus not trigger$onChanges. This hook is invoked with no arguments; if detecting changes, you must store the previous value(s) for comparison to the current values.
--AngularJS Comprehensive Directive API Reference -- Life-cycle hooks