angularjs NG-表没有显示在返回目录资料目录、资料、angularjs、NG
我使用AngularJS 1.2.10与Rails项目稳定，我试图让NG-表，我的数据的工作，并没有什么显示出来。
I'm using AngularJS 1.2.10 stable with a Rails project and I'm trying to get ng-table working with my data and nothing is showing up.
我已经包括了NG-表格文件，并在我的角度模块包含它。我的单页应用它没有加载数据中获取数据时，我刷新页面，但如果我退出此观点走，然后再回来。即：刷新浏览器的上市，所有的数据是存在的，我去查看单个项目，我带到一个新的页面（通过angularJS路由），那么我回到上市（通过angularJS再次路由）和数据是空的/没有上市。
I've included the ng-table files and included it in my angular module. I'm getting data when I refresh the page, but if I navigate away from this view, then back again within the single page app it's not loading the data. ie: Refresh the browser on the listing and all the data is there, I go to view an individual item and I'm taken to a new page (via angularJS routing) then I return to the listing (via angularJS routing again) and the data is empty/there is no listing.
下面是我的表
<table ng-table="tableParams" class="table">
<tr ng-repeat="debtor in debtors">
<td data-title="'Code'" sortable="'code'">{{debtor.code}}</td>
<td data-title="'Name'" sortable="'name'">{{debtor.name}}</td>
<td>
<a href="/api#/clients/{{debtor.id}}">Show</a>
<a href="/api#/clients/{{debtor.id}}/edit">Edit</a>
<a href="" ng-confirm-click="destroy(debtor.id)">Delete</a>
</td>
</tr>
</table>
下面是我的控制，我让我的数据。
Here is my controller where I get my data.
app.controller "DebtorsController", ['$window', '$scope', '$http', '$location', '$state', '$stateParams', '$modal', '$timeout', 'flash', 'Common', 'Debtor', 'Client', 'ngTableParams', '$filter', ($window, $scope, $http, $location, $state, $stateParams, $modal, $timeout, flash, Common, Debtor, Client, ngTableParams, $filter) ->
# --------------------------------------------------------------------------------
# Initialise
# --------------------------------------------------------------------------------
$scope.debtors = {}
# --------------------------------------------------------------------------------
# Index
# --------------------------------------------------------------------------------
if $state.current.name == "debtors"
Debtor.query {},
(data) ->
# Define ng-table params
$scope.tableParams = new ngTableParams({
page: 1,
total: data.length,
count: 10
})
# --------------------------------------------------------------------------------
# Index
# --------------------------------------------------------------------------------
if $state.current.name == "debtors"
$data = []
Debtor.query {}, (response) -> $data = response
console.log "debtors index"
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
sorting: { name: 'asc'}
}, {
total: $data.length,
getData: ($defer, params) ->
console.log "run deferred"
orderedData = (if params.sorting then $filter('orderBy')($data, params.orderBy()) else $data)
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()))
})
我可以在它调用铬合金控制台中看到
I can see in chromes console that it's calling
XHR finished loading: "http://localhost:3000/assets/layouts/default.html.erb". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/assets/debtors/index.html.erb". angular-min.js?body=1:1825
debtors index
ngTable: set settings
Object {$scope: null, $loading: false, data: null, total: 0, counts: Array[4]…}
angular-min.js?body=1:2147
ngTable: set parameters
Object {page: 1, count: 10, filter: Object, sorting: Object, group: Object…}
angular-min.js?body=1:2147
XHR finished loading: "http://localhost:3000/debtors". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/assets/debtors/_listing.html.erb". angular-min.js?body=1:1825
ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope
$get.h.$new.a {$id: "006", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
angular-min.js?body=1:2147
run deferred
ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope
$get.h.$new.a {$id: "006", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
angular-min.js?body=1:2147
(I clicked on 'show' for one of the items)
XHR finished loading: "http://localhost:3000/assets/clients/show.html.erb". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/clients/2". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/locations.json". angular-min.js?body=1:1825
(I clicked on 'listing' which takes me back to the debtors listing)
debtors index
ngTable: set settings
Object {$scope: null, $loading: false, data: null, total: 0, counts: Array[4]…}
angular-min.js?body=1:2147
ngTable: set parameters
Object {page: 1, count: 10, filter: Object, sorting: Object, group: Object…}
angular-min.js?body=1:2147
ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope
$get.h.$new.a {$id: "017", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
angular-min.js?body=1:2147
run deferred
ngTable: reload data angular-min.js?body=1:2147
ngTable: current scope
$get.h.$new.a {$id: "017", this: $get.h.$new.a, $$listeners: Object, $$listenerCount: Object, $parent: $get.h.$new.a…}
angular-min.js?body=1:2147
XHR finished loading: "http://localhost:3000/debtors".
在返回债务人列出他并没有叫这两行：
On returning to the debtors listing it is not calling these two lines:
XHR finished loading: "http://localhost:3000/debtors". angular-min.js?body=1:1825
XHR finished loading: "http://localhost:3000/assets/debtors/_listing.html.erb". angular-
我认为它重新加载数据，没有那么多的模板，虽然我可以看得出来。
I think it has to reload the data, not so much the template though as I can see that.
推荐答案
注意到了，我不得不去和获取数据withing ngTableParams的的getData一部分，等待它成功地与我的数据应用滤镜和交作业前返回回被渲染。
Noticed that I had to go and get the data withing the getData part of ngTableParams and wait for it to successfully return with my data before applying the filter and handing it back to be rendered.
# --------------------------------------------------------------------------------
# Index
# --------------------------------------------------------------------------------
if $state.current.name == "debtors"
# Setup ng-table with defaults and data
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
sorting: { name: 'asc'}
}, {
total: $data.length,
# ng-table will ask for updated data, this is where it gets it from.
getData: ($defer, params) ->
Debtor.query {}, (response) ->
$data = response
console.log 'run deferred'
orderedData = (if params.sorting then $filter('orderBy')($data, params.orderBy()) else $data)
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()))
})
