web-dev-qa-db-ja.com

Angular ui.bootstrapページネーション-現在のページが更新されない/ウォッチが機能しない

pagination内にdialogがあり、両方のディレクティブは_ui.bootstrap_です。問題は、_$watch_がcurrentPageメンバーに対して機能していないことです。

現在、同様のコードは、ページ付けがダイアログ内にない他のページでも完全に機能します。

この問題は_$scope_に関連していると思いますが、スコープでcurrentPageが使用可能であり、_{{currentPage}}_を使用してテンプレートに表示できます。

plunker でコードを見つけてください

$scope.$watch('currentPage')はページリンクをクリックしても起動しません。

これで、回避策として、paginationディレクティブによって提供されるコールバック_on-select-page_を使用できます。

例えば.

_<pagination on-select-page="pageChanged(page)" total-items="totalItems" items-per-page = "numPerPage" page="currentPage" max-size="maxSize"></pagination>
_

私のコントローラーの中には、

_$scope.pageChanged = function(page) {
  console.log(page);    
};
_

しかし、そのような場合に_$scope.$watch_が機能しない理由を理解する必要があります。

更新：コンソールから、以下はウォッチャーの値です

_$$watchers: Array[1] 
0th: Object
  eq: false
  exp: "currentPage"
  fn: function (o,n){}
_
angularjsangularjs-directiveangular-ui
10
hitesh israni

使用する：

... page="$parent.currentPage" ...

または適切な解決策：

ネストされたスコープが含まれる場合、変数をより深いレベルにバインドします。

$scope.data.currentPage = ...

詳細 ここ

例 ここ

28
Max

TestCtrlコントローラー内に新しいコントローラー（ModalDialogBaseCtl）を作成しているため、Angularは、親からすべてのプロパティを継承する新しいスコープを作成します。

私には疑わしいと思われる行は、ModalDialogBaseCtrlの開始時に$ scope.currentPageに値を割り当てているところです。 Angularは、新しいスコープでcurrentPageという新しい変数を宣言するときにこれを解釈します。ただし、ページネーションコントロールはMainCtrlのcurrentPage変数にアタッチされているため、ModalDialogBaseCtlを監視しても何も起こりません（変更されることはありません）。値）。

1つの修正は、Maxが示唆するように$ parentを使用することですが、それは優れた構造ではありません。代わりに、currentPageプロパティを2つではなく1つだけにする方法を見つけてください。

1
kanoop