Angular ui.bootstrap分页 - 当前页面没有更新/观看不起作用

I have a pagination inside a dialog both directives are of ui.bootstrap. The problem is that the $watch is not working for currentPage member.

我在对话框中有一个分页，两个指令都是ui.bootstrap。问题是$ watch不适用于currentPage成员。

Now, the similar code works perfectly fine for other pages where pagination is not inside some dialog.

现在，类似的代码非常适用于其他页面，其中分页不在某些对话框中。

I suppose this problem is related to $scope but then currentPage is available in the scope and i can display it on the template using {{currentPage}}

我想这个问题与$ scope有关，但是scope在范围内可用，我可以使用{{currentPage}}在模板上显示它

Please find the code in the plunker

请在plunker中找到代码

$scope.$watch('currentPage') is not firing up on clicking page links.

$ scope。$ watch（'currentPage'）没有点击页面链接。

Now, for the workaround I could use callback on-select-page provided by the pagination directive.

现在，对于解决方法，我可以使用pagination指令提供的回调on-select-page。

e.g.

例如

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

and inside my controller i can have,

在我的控制器内我可以，

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

But I rather need to understand why in such cases $scope.$watch wont work.

但我更需要理解为什么在这种情况下$ scope。$ watch不会工作。

Update: From the console following is the watchers value

更新：从控制台跟随的是观察者值

$$watchers: Array[1] 
0th: Object
  eq: false
  exp: "currentPage"
  fn: function (o,n){}

2 个解决方案

#1

Use:

使用：

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

Or proper solution:

或适当的解决方案

When nested scopes are involved bind your vars a level deeper i.e.:

当涉及嵌套范围时，将你的vars绑定得更深，即：

$scope.data.currentPage = ...

details here

详情请点击

example here

这里的例子

#2

Because you're creating a new controller (ModalDialogBaseCtl) inside the TestCtrl controller, Angular will create a new scope, which inherits all properties from its parent.

因为您在TestCtrl控制器中创建了一个新控制器（ModalDialogBaseCtl），所以Angular将创建一个新范围，该范围从其父级继承所有属性。

The line that looks suspect to me is where you're assigning a value to $scope.currentPage at the start of ModalDialogBaseCtrl. Angular will interpret this as you declaring a new variable called currentPage in the new scope. However, your pagination control is attached to the currentPage variable in MainCtrl so watching the ModalDialogBaseCtl one does nothing (it never changes value).

看起来让我怀疑的那一行是你在ModalDialogBaseCtrl开头为$ scope.currentPage赋值的地方。当你在新范围内声明一个名为currentPage的新变量时，Angular将对此进行解释。但是，您的分页控件附加到MainCtrl中的currentPage变量，因此观看ModalDialogBaseCtl没有做任何事情（它永远不会更改值）。

One fix is to use $parent as Max suggests, but that is not a great structure. Instead, try to find a way to only have one currentPage property instead of two.

一个解决方法是使用$ parent作为Max建议，但这不是一个很好的结构。相反，尝试找到一种只有一个currentPage属性而不是两个的方法。

#1