$ scope.watch被调用太多次了

时间:2017-04-02 18:39:05

标签: angularjs angularjs-scope ng-controller

我以为我已经解决了这个问题,但事实证明我没有这样做,所以我们非常感谢任何帮助。

基本上,我的控制器和示波器出现问题导致我的$ scope。$ watch()在我不想要的时候被调用。

我有一个Angular视图(html),带有使用不同控制器和视图的下拉和分页标记。

首先,我有这个:(其中form_item_Division.html只是一个部门的下拉列表)

<div class="panel panel-primary panel-shad-1" ng-controller="DashboardIEPItemDraftCtrl">
        <div ng-include="'views/partials/form_item_Division.html'"></div>
        <div ng-include="'app/dashboard/iep.html'" ng-controller="DashboardIEPItemDraftCtrl"></div>
</div>

我的iep.html看起来像这样:

<div ng-controller="DashboardIEPItemDraftCtrl">
<div ng-include="'app/dashboard/iepitem_table1.html'" ng-if="numberOfItemsByUserDivision > 0"></div>

        <div class="col-xs-12 text-center" ng-show="totalNumberPages > 1">
            <pagination items-per-page="itemsPerPage"
                    total-items="numberOfItemsByUserDivision"
                    ng-model="currentPage"
                    max-size="3"
                    boundary-links="true"
                    rotate="false"
                    class="pagination-sm panel-shad-1"
                    num-pages="totalNumberPages"
                    previous-text="&lsaquo;"
                    next-text="&rsaquo;"
                    first-text="&laquo;"
                    last-text="&raquo;">
            </pagination>
        </div>
</div>

我的iepitem_table1.html定义了表格布局,并且位于不同的控制器下。它看起来像这样:

<table class="table table-condensed table-striped table-hover" ng-controller="IEPItemTableCtrl">

   (table layout defined here)

</table>

我的脚本的相关部分如下所示:

$scope.getItemsBySelectedDivision = function (selectedDivisionId) {
   blah.get({ count: true, filter: 'DivisionPerformingId eq ' +   
   selectedDivisionId }).$promise.then(
      function (response) {
         $scope.itemsByUserDivision.length = 0;
         $scope.itemsByUserDivision = response.value;
         $scope.numberOfItemsByUserDivision = response.value.length;
         $scope.totalNumberPages = Math.ceil(response.value.length /    
         $scope.itemsPerPage);
         var pagedData = $scope.itemsByUserDivision.slice(0, 
         $scope.itemsPerPage);
         $scope.itemsByUserDivision = pagedData;
      },
      function (error) {
          // Do something when it errors
      });
        };

$scope.$watch("currentPage", function () {
   if ($scope.itemsByUserDivision != null) {
     $scope.itemsByUserDivision = originalItems;
     var pagedData = $scope.itemsByUserDivision.slice(($scope.currentPage -  
     1) * $scope.itemsPerPage, $scope.currentPage * $scope.itemsPerPage);
     $scope.itemsByUserDivision = pagedData;
 }
 });

当我从下拉列表中选择一个分区并使用分页标签滚动页面时,一切都很好。但是,当我滚动浏览具有多个页面的分区的页面然后返回并选择另一个分区时,显示的结果不正确。我想这是因为我的$ scope。$ watch()在我不想要的时候被调用。我想我没有为这种情况安排好我的控制器。无论如何,我们非常感谢任何帮助。

谢谢,

皮特

1 个答案:

答案 0 :(得分:0)

您可以比较您正在观看的变量的变化,

    $scope.$watch("currentPage", function (oldVal,newVal) {
        if(newVal!==oldVal){
               if ($scope.itemsByUserDivision != null) {
               $scope.itemsByUserDivision = originalItems;
               var pagedData =$scope.itemsByUserDivision.slice(($scope.currentPage -  
         1) * $scope.itemsPerPage, $scope.currentPage *  $scope.itemsPerPage);
         $scope.itemsByUserDivision = pagedData;
     }
   }  
     });