Rails プロジェクトで AngularJS 1.2.10 安定版を使用しています。データを ng-table で処理しようとしていますが、何も表示されません。
ng-table ファイルをインクルードし、角度モジュールにインクルードしました。ページを更新するとデータが取得されますが、このビューから離れてから、単一ページ アプリ内に戻ると、データが読み込まれません。つまり、リストでブラウザを更新すると、すべてのデータが表示されます。個々のアイテムを表示すると、(angularJS ルーティングを介して) 新しいページに移動し、(再び angularJS ルーティングを介して) リストに戻ります。データが空です/リストがありません。
これが私のテーブルです
<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>
これが私のデータを取得するコントローラーです。
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()))
})
呼び出していることがchromeコンソールでわかります
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".
債務者リストに戻ると、次の 2 行が呼び出されていません。
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-
私が見ることができるように、テンプレートではなく、データをリロードする必要があると思います。