javascript - 为什么这个 ng-grid 分页有效

Question

以下是我对以下代码中的 if 条件的理解：

$scope.pagingOptions = {
    pageSizes: [250, 500, 1000],
    pageSize: 250,
    currentPage: 1
};

$scope.$watch('pagingOptions', function (newVal, oldVal) {
    if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);

每当pagingOptions更改和currentPage属性发生更改时， 条件if变为 true，因此该getPagedDataAsync方法被执行。

currentPage但即使我不更改pageSizeUI 中的 ，网格也会刷新。我不希望发生这种情况（根据我的理解）。那么为什么该网格会被刷新呢？

从这里，我获取了代码：

http://angular-ui.github.io/ng-grid/ 带有服务器端分页示例标题

Answer 1

true末尾的表示$watch对范围对象的深入pagingOptions观察。

因此，如果true作为可选的第三个参数传入，Angular 将进行深度相等检查。因此，pageSize将检查属性是否相等并且会有所不同。

$watch第三个参数[objectEquality]的文档在这里。

Answer 2

提供的代码似乎包含不必要的复杂性。在执行“对象相等观察”$watch时（通过设置to的第三个参数true），比较对象的属性值而不是对象引用。如果我们假设属性值永远不会改变，那么手表会正确地通知我们，并且pageSizes只会通知我们关于值的更改。所以里面唯一需要的代码就是页面刷新的调用：pageSizecurrentPage

$scope.$watch('pagingOptions', function () {
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}, true);

Answer 3

再添加一只手表

$scope.$watch('pagingOptions.pageSize', function (newVal, oldVal) {
 if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
    }
}, true);