$ http要求は、$タイムアウト内で折り返した場合にのみデータを返します

Question

ここに問題があります。コンポーネント内にあるボタンをクリックするたびに$ httpコールをしていますコンソールの応答が、ブラウザで私は呼び出しが行われて参照してください。

私は$ timeout関数のコメントを外すときにのみ、データを管理します。

JS

var app = angular.module('myApp', []); 
app.controller('mainCtrl', [$scope, $http, $timeout, function($scope, $http, $timeout) { 

    $scope.navigate = function() { 
     $scope.getStats(); 
    } 

    $scope.getStats = function() { 
     //$timeout(function() { 
      $http 
       .get('/scripts/controllers/fda/appSvc.json') 
       .then(function (response) { 
        console.log(response.data); 
       }, function (error) { 
        console.log(error); 
       }) 
    //}, 0) 
    }; 

    $scope.detailedTableCtrl = { 
     navigate: $scope.navigate 
    } 

}]); 

app.component("myBox", { 
     bindings: { 
      'detailedTableCtrl': '=' 
     }, 
     controller: function($element) { 

     }, 
     controllerAs: 'myBox', 
     templateUrl: "/template", 
     transclude: true 
}) 

HTML

<div ng-app="myApp" ng-controller="mainCtrl"> 
     <my-box detailed-table-ctrl="detailedTableCtrl"></my-box> 
    </div><!--end app--> 

<!--mybox component--> 
    <button class="btn btn-default btn-sm" ng-click="myBox.detailedTableCtrl.navigate()"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
       <span>Back</span> 
      </button> 

Answer 1

@Amyは私が$ HTTPサービスが注入され表示されていない指摘したように。また、サービスを利用してデータを消費し、そのサービスをコントローラに注入してください。あなたのコントローラは、データの呼び出し/消費について心配する必要はありません。

<!-- Controller to get data from the Service or Factory (pay attention to service injection here) --> 
app.controller('mainCtrl', ['$scope', 'dataService', function($scope,dataService) { 

    dataService.getData().then(function(response) { 
      $scope.response = response.data; 
     }, function(error) { 
      $scope.error = error; 
      $scope.response = []; 
     }); 
}); 

<!-- Factory to handle your data from REST or JSON --> 
(function() { 
    "use strict"; 
    app.factory("dataService",['$http', function($http){ 

    function getData(){ 
     return $http.get('/scripts/controllers/fda/appSvc.json'); 
    } 
    return { 
     getData : getData 
    }; 
}]); 
})();