ng-table LoạiError: Không thể đặt thuộc tính '$ data' của null

Question

Tôi đang sử dụng ng-table để hiển thị thông tin từ cuộc gọi API mà tôi nhóm như ví dụ trên website.

Tuy nhiên, ví dụ trên trang web sử dụng thông tin tĩnh khi tôi cần thực hiện cuộc gọi API mới mỗi lần. Khi tôi không bao gồm chức năng $ scope.$watch('groupby', function(value), tôi có thể hiển thị bảng cho cuộc gọi đầu tiên, ban đầu.

angular.module('myApp.controllers', ['ngTable','ui.bootstrap','dialogs']) 
.controller('HomeCtrl', function($scope,$log, $rootScope, $modal, TimeService, EventServiceAPI, $filter, ngTableParams) { 
    var datum = new Date().setHours(0,0,0,0); 
    $scope.datum = datum; 
    var timestamp = Math.round(new Date().getTime()/1000); 


    var findAllEvents = function(timestampdata) { 
     EventServiceAPI.query({start: timestampdata, end: timestampdata + 3*24*60*60}).$promise.then(function(data) { 

      //var data = $filter('orderBy')(data, 'event.startHour'); 

      $scope.$watch("data", function() { 
       $scope.tableParams.reload(); 
      }); 

      $scope.tableParams = new ngTableParams({ 
       page: 1,   // show first page 
       count: 100   // count per page 

      }, { 
       groupBy: function(item) { 
        return 'Start vanaf ' + item.event.startHour + ' uur'; 
       }, 
       total: data.length, 
       getData: function($defer, params) { 
        var orderedData = params.sorting() ? 
          $filter('orderBy')(data, 'event.startHour') : 
          data; 

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
       } 
      }); 

      $scope.$watch('groupby', function(value){ 
       $scope.tableParams.settings().groupBy = value; 
       console.log('Scope Value', $scope.groupby); 
       console.log('Watch value', this.last); 
       console.log('new table',$scope.tableParams); 
       $scope.tableParams.reload(); 
      }); 
     }) 
    };  

    findAllEvents(timestamp); 

    $scope.getEarlier = function() { 
     datum -= (24 * 60 * 60 * 1000); 
     $scope.datum = datum; 
     var timestamp = Math.round(datum/1000); 
     console.log(timestamp); 
     findAllEvents(timestamp); 

    }; 
}); 

EDIT:

Bây giờ tôi có thể hiển thị dữ liệu, tuy nhiên các nhóm không được hiển thị:

var datum = new Date().setHours(0,0,0,0); 
    $scope.datum = datum; 
    var timestamp = Math.round(new Date().getTime()/1000); 

    EventServiceAPI.query({start: timestamp, end: timestamp + 3*24*60*60}).$promise.then(function(data) { $scope.data = data; initlizeTable(); }); 


    var initlizeTable = function() { 
     // Table 
     $scope.tableParams = new ngTableParams({ 
      page: 1,   // show first page 
      count: 100   // count per page 

     }, { 
      groupBy: function(item) { 
       return 'Start vanaf ' + $scope.data.event.startHour + ' uur'; 
      }, 
      total: $scope.data.length, 
      getData: function($defer, params) { 
       var data = EventServiceAPI.query({start: timestamp, end: timestamp + 3*24*60*60}); 
       var orderedData = params.sorting() ? 
         $filter('orderBy')($scope.data, 'event.startHour') : 
          $scope.data; 

         $defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
      }, $scope: { $data: $scope.data } 
     }); 

     $scope.$watch('groupby', function(value){ 
      $scope.tableParams.settings().groupBy = value; 
      console.log('Scope Value', $scope.groupby); 
      console.log('Watch value', this.last); 
      console.log('new table',$scope.tableParams); 
      $scope.tableParams.reload(); 
     }); 

     $scope.$watch('data', function(value){ 
      $scope.tableParams.settings().groupBy = value; 
      console.log('Scope Value', $scope.groupby); 
      console.log('Watch value', this.last); 
      console.log('new table',$scope.tableParams); 
      $scope.tableParams.reload(); 
     }); 

    } 

Answer 1

Tôi biết điều này là quá muộn, nhưng tôi nghĩ tốt hơn để bình luận về điều này cho những người khác đang tìm kiếm câu trả lời cho cùng một vấn đề.

Tôi cũng gặp vấn đề tương tự và được quản lý để khắc phục bằng cách làm theo ví dụ trong URL sau.

https://github.com/esvit/ng-table/blob/master/src/scripts/04-controller.js

Tôi chỉ cần thêm dòng mã sau vào mã của tôi sau khi tạo dụ 'ngTableParams'.

$scope.params.settings().$scope = $scope; 

Answer 2

here có một cái nhìn, thiết lập tất cả các thông số cho ngTableParams giải quyết vấn đề

Answer 3

Đây là khi nó bắt đầu làm việc cho tôi. Tôi đã thêm phạm vi trong params.settings.

controller: function() { 
... 
$scope.myTableParams = new ngTableParams({ 
. 
},{ 
... 
getData: function ($defer, params) { 
    if (params.settings().$scope == null) { 
     params.settings().$scope = $scope; 
    } 
. 
. 
}