2014-02-11 3 views
3

레일 프로젝트에서 AngularJS 1.2.10 stable을 사용하고 있으며 데이터로 작업하는 ng-table을 얻으려고하고 있는데 아무 것도 나타나지 않습니다.angularjs ng-table이 목록으로 돌아 오는 중 데이터를 표시하지 않습니다.

나는 ng-table 파일을 포함하고이를 내 각 모듈에 포함 시켰습니다. 페이지를 새로 고침 할 때 데이터가 표시되지만이 뷰에서 벗어난 경우 다시 단일 페이지 앱 내에서 다시 데이터를로드하지 않습니다. ie : 목록에서 브라우저를 새로 고치면 모든 데이터가 있습니다. 개별 항목을 보러 가고 (angleJS 라우팅을 통해) 새 페이지로 이동 한 다음, 다시 (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> 

입니다.

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- 

내가 그것을 다시로드 할 수 있다고 생각 : 그것은이 두 줄을 호출하지 않는 목록 채무자로 돌아에

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". 

을 부르고 그 난의 Chromes 콘솔에서

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())) 
    }) 

볼 수 있습니다 데이터, 그렇게 많은 템플릿을 볼 수 있지만.

답변

2

ngTableParams의 getData 부분과 함께 데이터를 가져 와서 필터를 적용하고 렌더링하기 위해 데이터를 전달하기 전에 내 데이터와 함께 성공적으로 반환 될 때까지 기다려야한다는 사실을 알게되었습니다.

# -------------------------------------------------------------------------------- 
    # 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())) 
    })