AngularJS: Получение данных из службы в контроллер

Question

Я читал различные сообщения SO о обещаниях и обратных вызовах, но до сих пор не понимаю, когда использовать. Я даже не уверен на 100%, если моя проблема связана с обещаниями или обратными вызовами. У меня возникают проблемы с получением данных из службы в контроллер, а затем доступ к этим данным в представлении.

HTML

<div ng-controller="AppCtrl as appCtrl" flex=""> 
    <div ng-controller="FlexClusterCtrl as modelCtrl"> 
     <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6" 
         md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px" 
         md-gutter-gt-sm="4px" class="gridList"> 
      <md-grid-tile ng-repeat="cluster in instances.clusters" 
          md-rowspan="1" md-colspan="3" md-colspan-sm="1" class="gridTile"> 
       <md-grid-list flex="" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" 
           md-row-height-gt-md="1:1" md-row-height="1:1" md-gutter="6px" 
           layout-fill> 
        <md-grid-tile ng-repeat="cluster2 in cluster.clusters2" 
            md-rowspan="1" md-colspan="1" class="flexTile"> 
         <md-grid-list flex="" md-cols-sm="1" md-cols-md="2" md-cols-gt-md="3" 
             md-row-height="4:3" layout-fill> 
          <md-grid-tile ng-repeat="INSTANCE in cluster2.INSTANCES" 
              md-colspan="1" class="instanceTile"> 
           <md-button ng-disabled>{{INSTANCE.ID}}</md-button> 
          </md-grid-tile> 
         </md-grid-list> 
        </md-grid-tile> 
       </md-grid-list> 
       <md-grid-tile-footer style="text-align:center;"><h3>{{cluster.name}}</h3></md-grid-tile-footer> 
      </md-grid-tile> 
     </md-grid-list> 
    </div> 
</div> 

контроллер и обслуживание

angular.module('app') 
    .service('ModelSvc', ['$http', function($http) { 
     return { 
      getInstances: function() { 
       $http.get('vendor/resources/flat.json') 
        .then(function(res) { 
         $instances = res.data; 
         return $instances; 
        }); 
      } 
     }; 
    }]) 

    .controller('FlexClusterCtrl', ['$scope', 'ModelSvc', function($scope, ModelSvc) { 
     $scope.init = function() { 
      ModelSvc.getInstances().then(function(data) { 
       $scope.instances = data; 
      }); 
     }; 
    }]); 

Я использую Угловая Материал, если HTML выглядит напуганным для некоторых из вас. Я также попытался использовать [в моем первом ngRepeat] ng-repeat="cluster in init.instances.clusters" и ng-repeat="cluster in init.clusters", но безрезультатно. Я не знаю, проблема в моей службе, контроллере или просмотре. Браузер не возвращает никаких ошибок.

Answer 1

Вы должны вернуть обещание, а затем вы можете поместить данные в объеме

getInstances: function() { 
       return $http.get('vendor/resources/flat.json'); 
       } 

одна тонкая, она не дает никаких ошибок, потому что ваше обещание не имеют обратного вызова ошибки, как это :

promise.then(
     function(data) { 
      //something 
     }, 
     function(error) { 
      // error calback 
     });