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;
            });
        };
    }]);

我正在使用Angular Material，如果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
      });

AngularJS：从服务获取数据到控制器

1 个答案: