$ http.get呼び出しが不正なデータをAngular UI-Gridコントロールに返す

Question

これは私の最初のui-gridアプリケーションで、AngularJSとnodejsとexpressフレームワークをバックエンドとして使用しています。

APIが正常に動作していて、データがブラウザに届いていますが、イベントのシーケンスとAngularコンテキストでの非同期呼び出しの使用については本当に混乱しています。

私は画面にグリッドを配置する必要があります。このグリッドは、APIからデータをロードする必要があります。ここに私のグリッドオブジェクトは、HTMLページ上にある：

<div class="tile-body" ng-controller="AdminUsersGridCtrl"> 
    <div id="grid" ui-grid="gridOptions" class="grid"></div> 
    </div> 

そして、ここでは私のコントローラである。このシーケンスでエラーが発生して

app.controller('AdminUsersGridCtrl', function ($scope, $http, uiGridConstants) { 

    $http.get('/api/admin/user') 
    .then(function (response) { 

     $scope.myData = response; 

     $scope.gridOptions = { 
      data: 'myData', 
      enableFiltering: true, 
      columnDefs: [ 
      { field: 'firstName' }, 
      { field: 'lastName' }, 
      { field: 'jobTitle'}, 
      { 
       field: 'email', 
       filter: { 
       condition: uiGridConstants.filter.ENDS_WITH, 
       placeholder: 'ends with' 
       } 
      }, 
      { 
       field: 'phone', 
       filter: { 
       condition: function(searchTerm, cellValue) { 
        var strippedValue = (cellValue + '').replace(/[^\d]/g, ''); 
        return strippedValue.indexOf(searchTerm) >= 0; 
       } 
       } 
      }, 
      ] 
     }; 
    }, 
    function (error) { 
     console.log(error); 
    }); 
    }); 

- 私：

TypeError: Cannot read property 'data' of undefined 
    at new <anonymous> (ui-grid.js:3130) 
    at Object.invoke (angular.js:4604) 
    at extend.instance (angular.js:9855) 
    at nodeLinkFn (angular.js:8927) 
    at angular.js:9231 
    at processQueue (angular.js:15552) 
    at angular.js:15568 
    at Scope.$eval (angular.js:16820) 
    at Scope.$digest (angular.js:16636) 
    at Scope.$apply (angular.js:16928) 

私はcan'tここで何が起こっているのか調べる。そのエラーメッセージはどこから来ていますか？

Answer 1

promise呼び出しの外でgridOptionsを初期化する必要があります。

app.controller('AdminUsersGridCtrl', function ($scope, $http, uiGridConstants) { 


     $scope.gridOptions = { 
      enableFiltering: true, 
      columnDefs: [ 
      { field: 'firstName' }, 
      { field: 'lastName' }, 
      { field: 'jobTitle'}, 
      { 
       field: 'email', 
       filter: { 
       condition: uiGridConstants.filter.ENDS_WITH, 
       placeholder: 'ends with' 
       } 
      }, 
      { 
       field: 'phone', 
       filter: { 
       condition: function(searchTerm, cellValue) { 
        var strippedValue = (cellValue + '').replace(/[^\d]/g, ''); 
        return strippedValue.indexOf(searchTerm) >= 0; 
       } 
       } 
      }, 
      ] 
     }; 

    $http.get('/api/admin/user') 
    .then(function (response) { 
     $scope.gridOptions.data = response.data; // Content is in the response.data 
    }, 
    function (error) { 
     console.log(error); 
    }); 
    });