10

我有一个pagination里面的dialog两个指令都是ui.bootstrap. 问题是$watch不适用于 currentPage 成员。

现在，对于分页不在某个对话框中的其他页面，类似的代码可以正常工作。

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

请在plunker中找到代码

$scope.$watch('currentPage')单击页面链接时不会启动。

现在，对于解决方法，我可以使用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){}
4

2 回答 2

28

利用：

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

或适当的解决方案：

当涉及嵌套范围时，将您的 var 绑定到更深的级别，即：

$scope.data.currentPage = ...

详情在这里

这里的例子

于 2013-10-04T12:33:19.820 回答
1

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

在我看来可疑的行是您在 ModalDialogBaseCtrl 开始时为 $scope.currentPage 分配值的位置。当您在新范围内声明一个名为 currentPage 的新变量时，Angular 会解释这一点。但是，您的分页控件附加到 MainCtrl 中的 currentPage 变量，因此观看 ModalDialogBaseCtl 什么都不做（它永远不会改变值）。

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

于 2013-10-04T15:25:51.957 回答