map7 map7 - 15 days ago 5
AngularJS Question

ng-table TypeError: undefined is not a function

I'm using an old version of ng-tables 0.4.2 and if I upgrade to 0.4.3 it displays the error in my chromium console

TypeError: undefined is not a function
at reload (http://localhost:3000/assets/ng-table/ng-table.min.js?body=1:140:160)
at Object.fn (http://localhost:3000/assets/ng-table/ng-table.min.js?body=1:196:24)
at Scope.$digest (http://localhost:3000/assets/angular/angular.js?body=1:5226:31)
at Scope.$apply (http://localhost:3000/assets/angular/angular.js?body=1:5305:28)
at done (http://localhost:3000/assets/angular/angular.js?body=1:3182:26)
at completeRequest (http://localhost:3000/assets/angular/angular.js?body=1:3306:9)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/assets/angular/angular.js?body=1:3279:13)


Here is how I've configured my tableParams

page = $location.search()['page'] # Get page from the URL

# data is created by ngTableParams
$scope.tableParams = new ngTableParams({
page: if page then page else 1,
count: 10,
sorting: { invoice_no: 'desc'}
}, {
total: 0,
filterDelay: 500,

# ng-table will ask for updated data, this is where it gets it from.
getData: ($defer, params) ->
# Go get a list of debtors
Invoice.query params.url(), (data) ->
params.total($scope.total)
$location.search(params.url()) # Params into URL
orderedData = (if params.sorting then $filter('orderBy')(data, params.orderBy()) else data) # Sort
$defer.resolve(orderedData) # Paginate / update table with new data
})


I do include ng-tables in my module and ngTableParams in my controller.

Update: Passing mock data works

If I do the following there is no error.

# ng-table will ask for updated data, this is where it gets it from.
getData: ($defer, params) ->
$defer.resolve([{invoice_no: 1}])


Update: Using Restangular instead of angular-resource works

So doing my query using Restangular works

getData: ($defer, params) ->
Restangular.all('invoices').getList()
.then((data) ->
return data
)


Maybe in ng-table 0.4.3 and above I can no longer use angular-resource? or I'm just doing it wrong. Here is my invoice resource (which was working in ng-table 0.4.2).

Invoice = ['$resource', 'apiPrefix', ($resource, apiPrefix) ->
$resource( apiPrefix + "/invoices/:id",
id: "@id"
,
# Add update method
update: {method: "PUT"}
)
]

angular
.module('paisApp')
.factory('Invoice', Invoice)

Answer

I found that the Invoice resource was returning a type which ng-tables doesn't like. ng-tables version 0.4.3 expects a $defer object to be returned, so I had to wrap my query in a defer.resolve. Now it works.

  $defer.resolve(
    Invoice.query params.url(), (data) ->
      orderedData = (if params.sorting then $filter('orderBy')(data, params.orderBy()) else data) # Sort
      return orderedData
  )