ng-Table在重新加載請求時沒有呈現新數據

Question

我有一張使用ng-table的頁面，它可以與初始數據一起工作。我有一個選擇框根據選擇的選項發送服務器請求，然後Iam獲取新的數據到角度，但不會用ng-table更新。

這是我的觀點：

<section data-ng-controller="ReportsController"> 
<div class="plain-box"> 
    <table ng-table="tableParams" show-filter="true" class="table table-striped"> 
     <thead> 
     <tr> 
      <th ng-repeat="column in columns" ng-show="column.visible" 
       class="text-center sortable" ng-class="{ 
        'sort-asc': tableParams.isSortBy(column.field, 'asc'), 
        'sort-desc': tableParams.isSortBy(column.field, 'desc') 
        }" 
       ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')"> 
       {{column.title}} 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="user in $data"> 
      <td ng-repeat="column in columns" sortable="column.field"> 
       {{user[column.field]}} 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

我的控制器：

angular.module('reports').controller('ReportsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Reports', '$filter', 'ngTableParams', 
function($scope, $stateParams, $location, Authentication, Reports, $filter, ngTableParams) { 
    $scope.reportBillingPeriod = 0; 
    $scope.$watch('reportBillingPeriod', function(newValue, oldValue) { 
     $scope.findReportData(newValue); 
    }); 
    //$scope.reportBillingData = 0; 


    $scope.findReportData = function(selectedMonth){ 
     var selectedPeriod = selectedMonth; 
     if(selectedPeriod === null) 
     selectedPeriod = '0'; 
     $scope.customers_report = Reports.customer_report({ 
     monthReport: selectedPeriod 
     }, function(result){ 
     var data = result.customers; 
     $scope.columns = [ 
      { title: 'Account Name', field: 'accountName', visible: true, filter: { 'name': 'text' } }, 
      { title: 'Gross Revenue', field: 'planTotalAmount', visible: true } 
     ]; 

    $scope.$watch('result', function() { 
     $scope.tableParams.settings().$scope = $scope; 
     $scope.tableParams.reload(); 
    }); 

     $scope.tableParams = new ngTableParams({ 
      page: 1,   // show first page 
      count: 10,   // count per page 
      filter: { 
      name: 'O'  // initial filter 
      } 
     }, { 
      total: data.length, // length of data 
      getData: function($defer, params) { 
      var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; 
      $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
      //$scope.reportBillingData = new Date(); 
      } 
     }); 
     }); 
    }; 
}]); 

Answer 1

$scope.$watch('result', function() { 
     $scope.tableParams.settings().$scope = $scope; <<--nested scope is replacing!! 
     $scope.tableParams.reload(); 
    }); 

ngTable指令創建嵌套範圍由inculde所有設置指令工作，所以你不應該用ReportsControll的範圍來替換它呃
您需要刪除此行 $scope.tableParams.settings().$scope = $scope;
你需要爲指定所有參數ngTable，請看看 這裏In ngTables, running $scope.tableParams.reload() for the third time results in TypeError: Cannot set property '$data' of null

UPDATE ，也最好還是採取ngTableParams intialization和$爲了防止錯誤和不必要的重新初始化而在findReportData函數之外監視結果

UPDATE 2 我成立plunk，儘量使其看上去更像原來的問題，和模擬的HTTPService， 但是這並不重要，所有的數據訪問必須在ngTableParams在裏面getData FUNC會，並設置了所有過濾器，當您需要（或者可能只是使用$watch就好像在plunk中），您必須撥打$scope.tableParams.reload();，您可以嘗試在上面的輸入中輸入一些數字，並且數據將會更新而不會出現問題。爲清晰起見，將刪除與排序，分頁和篩選相關的代碼， 所以getData看起來像下面：

getData: function($defer, params) { 
     var selectedPeriod = $scope.reportBillingPeriod ; //selectedMonth; 
     if(selectedPeriod === null) 
    selectedPeriod = '0'; 
    $scope.customers_report = Reports.get({ //Reports.customer_report({ 
    monthReport: selectedPeriod 
    }, function(result){ 
    var data = result.customers; 
    $scope.tableParams.total(data.length); 


    var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; 
     $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 

    });  

     } 

並觀察過濾器更改l OOK喜歡遵循：

$scope.reportBillingPeriod = 0; 
    $scope.$watch('reportBillingPeriod', function(newValue, oldValue) { 
     $scope.tableParams.reload(); 
    }); 

更新3
刪除調用getData FUNC的複製，編輯here 問題奠定了在reportBillingPeriod變量$watch，所以爲了防止第二數據上傳我們要檢查如何值改變時，像這裏

$scope.reportBillingPeriod = defaultValue; 
    $scope.$watch('reportBillingPeriod', function(newValue, oldValue) { 
     //this how we prevent second call 
     if (newValue!=oldValue) 
     $scope.tableParams.reload(); 
    });