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 对你们中的某些人来说看起来很时髦，我会使用 Angular Material。我也尝试使用 [in my first ngRepeat] ng-repeat="cluster in init.instances.clusters" 和 ng-repeat="cluster in init.clusters"，但无济于事。我不知道问题出在我的服务、控制器或视图中。浏览器没有返回任何错误。

Answer 1

你需要返回promise，然后才能把数据放到scope里

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

另一个薄，它不会给你错误，因为你的承诺没有错误回调，像这样：

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