ng-table , getData called more than once, why?

Question

For some reason when getData uses angular resource to bring the data it is being called twice, causing the resource to do it REST request twice too <--- bad...

Any idea why and how to solve it?

Here a working testcase/plunker example that recreates this scenario (look at the browser console - "getData being called...." displayed twice ) b.t.w as you can see I'm not really using the resource to bring real data, just to demonstrate the scenario, In my real app I do use the resource to bring real data and its being called twice just like in this example,

Thanks ahead

---

After looking into the src of the ng-table I noticed the following

$scope.$watch('params.$params', function(params) {
    $scope.params.settings().$scope = $scope;
    $scope.params.reload();
}, true);

Which means that the tables calls it 'getData' on count/filter/group/groupBy/page/sorting which explains the behavior I was seeing.

Answer 1

When you call params.count(...) you ask ng-table to refresh data as you change page size. That's why you have two get-data calls.

If you don't want to have paging, then remove calls params.count and params.total. If you need paging, then set page size and do not change it in getData.

Answer 2

This happened to me with a weird reason. getData get called twice on init (first load) only. changing page or sorting didn't call getData twice. The reason was that at init the ng-table directive was hidden in the template file.

Answer 3

Thank @Alexander Vasilyev. I understood my problem as you said. I want to explain a litte more here. In fact, the object "params" is the object configuration the table ng-table, then if "params" changed (ex: count or a property of the object), ng-table will invoke function getData() to refresh table. In my case, I want to get information in the object "params" and change it but I dont want to refresh ng-table. I did it by cloning object "params" et work his object copied. Clone the object in JS with jQuery :

var resultParams = jQuery.extend(true, {}, params.$params);

And then, I will work on the object resultParams instead of "params" original.