Binding service data in angularJS

Question

I have a service that is used to share data between 2 controllers and retrieves a data list:

myApp.service('DataService', function($http) {
    this.data = [];
    this.loadData = function() {
        $http.get('/api/data').success(function(data) {
            this.data= data;
        })
    };

});

which is called in my controller:

myApp.controller('appController', function($scope, DataService) {
    $scope.DataService= DataService;
    DataService.loadData();
});

and displayed here:

<div ng-controller="appController">
    <li ng-repeat='item in DataService.data'>
        <a href="#item/{{item.ID}}"> View Item</a>
    </li>
</div>

When this is ran, it doesn't display anything. I have ran it with some alert boxes and can see that the data list is populated with the data I want to display but no information is displayed otherwise.

Justin Niessner · Accepted Answer · 2014-05-16 14:42:21Z

4

You're using your service incorrectly. Right now, it's going to be hard for Angular to watch the property on your service for changes. Instead of storing the data as a property on itself, it should simply return it to the caller. Try:

myApp.service('dataService', function($http) {
    this.loadData = function() {
        return $http.get('/api/data').then(function(data) { return data; });
    }
}

Which is then called in the controller like:

myApp.controller('appController', function($scope, dataService) {
    $scope.data = dataService.loadData();
});

And bound to in the view like:

<div ng-controller="appController">
    <li ng-repeat="item in data track by $id">
        <a href="#item/{{ item.ID }}">View Item</a>
    </li>
</div>

edited May 16, 2014 at 14:42

answered May 16, 2014 at 14:35

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

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

4 Comments

corring Over a year ago

I am using a service as I want to share data between 2 controllers

Justin Niessner Over a year ago

@user3644980 - Using the service for that sharing is the wrong way to do it though. Are the two controllers nested or separate?

corring Over a year ago

The 2 controllers are nested, what would you suggest is the best way of doing this?

Justin Niessner Over a year ago

@user3644980 - If you're nesting the controllers, the inner controller's scope should inherit from the outer controller's scope. Once you add $scope.data in the outer, it should be there for the inner as well (may need to use $scope.$parent.data, I'm not sure off the top of my head).

tymeJV · Accepted Answer · 2014-05-16 14:34:15Z

1

Have to return a promise and use .then to access it:

this.loadData = function() {
    return $http.get('/api/data').then(function(data) {
        return data.result
    })
};

Ctrl:

DataService.loadData().then(function(data) {
    $scope.DataService = data;
});

answered May 16, 2014 at 14:34

tymeJV

105k14 gold badges165 silver badges158 bronze badges

2 Comments

Justin Niessner Over a year ago

Assuming the value is going to be bound, there's no need for then. You can simply return the promise and allow the binding to handle the promise.

Justin Niessner Over a year ago

Actually, scratch that. It looks like they removed the promise unwrapping during binding. github.com/angular/angular.js/commit/…

António Sérgio Simões · Accepted Answer · 2014-05-16 14:42:40Z

0

Not sure if I've got this right but...by calling the method on the service itself instead of on the service assigned to the $scope won't that make it Angular JS miss the watch on the data property completely?

answered May 16, 2014 at 14:42

António Sérgio Simões

9817 silver badges11 bronze badges

Collectives™ on Stack Overflow

Binding service data in angularJS

3 Answers 3

4 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Related