AngularJS: Getting data from service into controller

Question

I've read various SO posts about promises and callbacks, but am still confused on when to use which. I'm not even 100% sure if my problem involves promises or callbacks. I'm having trouble getting data from a service into a controller, and then accessing that data in the view.

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>

controller and service

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

I'm using Angular Material if the HTML looks funky to some of you. I've also tried using [in my first ngRepeat] ng-repeat="cluster in init.instances.clusters" and ng-repeat="cluster in init.clusters", but to no avail. I don't know if the problem is in my service, controller, or view. The browser is not returning any errors.

cagica · Accepted Answer · 2015-10-02 13:44:18Z

1

You need to return the promise, and then you can put the data in scope

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

One other thin, it gives you no error's, because your promise don't have an error callback, like this:

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

answered Oct 2, 2015 at 13:44

cagica

6794 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

UltraSonja Over a year ago

Hmm ok. Then I would get that data in the view with what? ng-repeat="cluster in init.clusters? I've tried a few combinations with your suggestion but none of them are working.

cagica Over a year ago

You're storing it in $scope.instances not $scope.init. So maybe ng-repeat="instance in instances". Have you checked if $scope.instances get's your data?

cagica Over a year ago

Looking at your HTML, it looks fine, so I think is a problem with receiving your data.

UltraSonja Over a year ago

The data it's getting is the response header or something... {data: Object, status: 200, config: Object, statusText: "OK"} after I run console.log($scope.instances).

UltraSonja Over a year ago

I got it worked out. I'll just add a little to your answer.

|

Collectives™ on Stack Overflow

AngularJS: Getting data from service into controller

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related