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

Question

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

0

Я читал различные сообщения 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;
            });
        };
    }]);

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

UltraSonja 02 окт. 2015, в 15:48

Источник

Теги:

angularjs

controller

service

1 ответ

Ещё вопросы

pcagica · Accepted Answer · 2015-10-02T11-17-00.000Z

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

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

Еще один тонкий, он не дает ошибок, потому что в вашем обещании нет обратного вызова ошибки, например:

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

Хмм хорошо. Тогда я хотел бы получить эти данные с чем? ng-repeat="cluster in init.clusters ? Я пробовал несколько комбинаций с вашим предложением, но ни одна из них не работает.
Вы храните его в $ scope.instances, а не в $ scope.init. Так что, возможно, ng-repeat = "instance in instance". Вы проверили, получают ли $ scope.instances ваши данные?
Глядя на ваш HTML, он выглядит хорошо, поэтому я думаю, что проблема с получением ваших данных.
Получаемые данные являются заголовком ответа или чем-то ... {data: Object, status: 200, config: Object, statusText: "OK"} после запуска console.log($scope.instances) .
Я получил это сработало. Я просто добавлю немного к вашему ответу.
Просто измените $ scope.instance = data на $ scope.instance = data.data, возможно, вы можете изменить свой аргумент на res, а затем сделать res.data. Рад, что смог помочь.