読者です 読者をやめる 読者になる 読者になる

UI BootstrapのPagerが機能しなくてハマった

Bootstrap

AngularJSでBootstrapを扱うためのライブラリ、UI Bootstrapを使ってみたんですが、サンプルコードを参考にPagerを実装してもなぜか機能してくれなくてハマってしまいました。

サンプルコードを記載しているページではちゃんと機能しているので、AngularJSとui.bootstrapのバージョンの組み合わせでうまくいかなくなったりしてるのかなぁと勝手に想像しています。

めんどうなのでちゃんと確認はしていませんが、以下のようにすることで機能できるようにはできました。

サンプルコード

Markup

<pager total-items="totalItems" ng-model="currentPage"></pager>

JavaScript

$scope.pageChanged = function() {
    console.log('Page changed to: ' + $scope.currentPage);
};

Angular directives for Bootstrap


サンプルコードではこうなっているのですが、これだとpageChangedが呼ばれませんでした。

修正後のコード

Markup

<pager ng-change="pageChanged()" total-items="totalItems" ng-model="currentPage"></pager>

なので、ng-changeを明示的に記述し呼ばれるように修正。

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!