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

Question

我在pagination dialog内有ui.bootstrap两个指令都是$watch。问题是$scope不适用于currentPage成员。

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

我认为这个问题与currentPage有关但是{{currentPage}}在范围内可用，我可以使用$scope.$watch('currentPage')

在模板上显示

请在plunker

中找到代码 点击页面链接时，

on-select-page没有启动。

现在，对于解决方法，我可以使用pagination指令提供的回调<pagination on-select-page="pageChanged(page)" total-items="totalItems" items-per-page = "numPerPage" page="currentPage" max-size="maxSize"></pagination> 。

e.g。

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

在我的控制器里面，我可以拥有，

$scope.$watch

但我宁愿理解为什么在这种情况下$$watchers: Array[1] 0th: Object eq: false exp: "currentPage" fn: function (o,n){} 不会工作。

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

{{1}}

Answer 1

使用：

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

或正确解决方案：

当涉及嵌套范围时，请将您的变量更深层绑定，即：

$scope.data.currentPage = ...

详情here

示例here

Answer 2

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

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

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