Question

我有$ scope。$ watch call的问题，显然应该调用它。我的html文档中有一个paginator（bootstrap UI）：

<pagination  total-items="paginatorTotalItems" items-per-page="paginatorItemsPerPage" 
   page="paginatorCurrentPage" max-size="paginatorSize" class="pagination-sm" 
   boundary-links="true">
</pagination>

某个部分，我的项目显示（对他们我需要一个分页器）：

<div ng-show="reviews" ng-repeat="review in reviewsPerPage">
...
</div>

和控制器：

...
$scope.reviewsArray = [];
$scope.paginatorItemsPerPage = 1;
$scope.paginatorSize = 3;
$scope.reviewsPerPage = [];
$scope.paginatorTotalItems = $scope.reviews.result.total;

       //restangular object to Array
       for (var i = 0; i < $scope.paginatorTotalItems; i++) {
           $scope.reviewsArray.push($scope.reviews.result.reviews[i]);
       };

       $scope.paginatorCurrentPage = 1;

$scope.$watch('paginatorCurrentPage', function () {
               var begin = (($scope.paginatorCurrentPage - 1) * $scope.paginatorItemsPerPage);
               var end = begin + $scope.paginatorItemsPerPage;

               console.log($scope.paginatorCurrentPage);
               console.log(begin + ' ' + end);

               $scope.reviewsPerPage = $scope.reviewsArray.slice(begin,end);

               console.log($scope.reviewsPerPage);
});

所以，长话短说，我有一个变量paginatorCurrentPage，我通过点击<pagination>中的数字来改变，但是$ watch没有反应。这个$ watch只被调用一次：当我为它指定一个值1（从我的restangular对象创建一个数组后），之后再也不会调用$ watch。另外，我正在查看我的html文件中paginatorCurrentPage的变化：

<p>Current : {{paginatorCurrentPage}}</p>

它确实有效，这个变量正在改变，当我切换我的分页按钮时，但是没有调用$ watch。

抱歉我的英文，谢谢！

已编辑：

我已经更新了我的引导UI，所以现在在分页器中我使用ng-model而不是page。我意识到变量paginatorCurrentPage只在我的视图中更改，但在控制器中我仍然有我的默认$scope.paginatorCurrentPage = 1。问题仍然存在。

Answer 1

感谢所有评论。问题在于范围。我在paginator中重写了ng-model：ng-model="paginatorPage.current"

并更改了

$scope.paginatorCurrentPage = 1;

到

$scope.paginatorPage = {current : 1};

感谢@Leo Farmer关于指令中点的建议。

不会叫$ watch，Angularjs

1 个答案: