私のモデルバインディングには何が起こっていますか？

Question

$resourceを使用してRESTful Webサービスを使用する小さなAngularJsアプリケーションがあります。リソース（salesOrderResource）は、モデルのvm.rowDataにバインドする5つのオブジェクトを返します。 vm.rowDataが突然未定義で、一度リソースのquery機能の外に、しかし

：

私は、確かに、データを持っていないことを示すためにコンソールに戻ったリソースを書き出します

これがなぜ起こっているのかわかりません。私は、誰かがここで何が起こっているかについていくつかの光を当てることを望んでいます。

(function() { 
 
    "use strict"; 
 

 
    angular 
 
     .module("app") 
 
     .controller("SalesOrderListCtrl", ["salesOrderResource", SalesOrderListCtrl]); 
 

 
    function SalesOrderListCtrl(salesOrderResource) { 
 
     var vm = this;    
 

 
     vm.columnDefs = [ 
 
      { headerName: "Sales Order#", field: "SalesOrderNumber" }, 
 
      { headerName: "Lot#", field: "LotNumber" }, 
 
      { headerName: "Qty", field: "Quantity" }, 
 
      { headerName: "Status", field: "Status" }, 
 
      { headerName: "Branch", field: "Branch" } 
 
     ]; 
 

 
     salesOrderResource.query(function (data) { 
 
      vm.rowData = data; 
 
      console.log("In query function:"); 
 
      console.log(vm.rowData); 
 
     })  
 

 
     console.log("Outside query function:"); 
 
     console.log(vm.rowData); 
 

 
     vm.gridOptions = { 
 

 
      // PROPERTIES - object properties, myRowData and myColDefs are created somewhere in your application 
 
      rowData: vm.rowData, 
 
      columnDefs: vm.columnDefs, 
 

 
      // PROPERTIES - simple boolean/string/number properties 
 
      enableColResize: true, 
 
      rowHeight: 22, 
 
      rowSelection: "single", 
 

 
      // EVENTS - add event callback handlers 
 
      onRowClicked: function (event) { console.log("a row was clicked"); }, 
 
      onColumnResized: function (event) { console.log("a column was resized"); }, 
 
      onGridReady: function (event) { console.log("the grid is now ready"); }, 
 

 
      // CALLBACKS 
 
      isScrollLag: function() { return false; } 
 
     }   
 
    } 
 
})();

Answer 1

の$ resource.queryは非同期です：

は、ここに私のコントローラです。 クエリ機能が終了する前に外部クエリ機能が印刷されます。

salesOrderResource.query(function (data) { 
      vm.rowData = data; 
      console.log("In query function:"); 
      console.log(vm.rowData); 
     }) 

これは1番目に発生します。

console.log("Outside query function:"); 
console.log(vm.rowData); 

setTimeout(function() { 
    $scope.$apply(function() { 
     console.log("Outside query function delayed:"); 
     console.log(vm.rowData); 
    }); 
}, 1000);