Share data between controllers in Ionic Framework/Angular JS

Question

What is the best way of sharing data between controllers using services in AngularJS?

For example, when the user selects an item from the <ion-list> in services.html, I'd like the title of the selected item to be displayed in service.html. {{service.name}} is some pseudocode I've written down to kinda spell out what I am trying to achieve.

services.html

    <ion-list>
        <ion-item ng-repeat="service in services" href="#/app/services/{{service.id}}" class="item-icon-right">
            {{service.title}} 
            <i class="icon ion-chevron-right icon-accessory">
                <span class="badge badge-positive">{{service.total}}</span>
            </i>
        </ion-item>
    </ion-list>

service.html

<ion-view view-title="Playlist">
    <ion-content>
        <h1>{{service.name}}</h1>
    </ion-content>
</ion-view>

controller.js

.controller('ServicesCtrl', ["$scope", "ServicesData", function($scope, ServicesData) {
  $scope.services = ServicesData.GetServices()
}])

.controller('ServiceCtrl', function($scope, $stateParams) {
});

services.js

angular.module('starter.services', [])

.service("ServicesData", [function () {

    var servicesData = [
        { 
            title: 'Car Repair and Maintenance', 
            total: 7, 
            id: 1 
        },
        { 
            title: 'Cleaning', 
            total: 1, 
            id: 2 
        },
        { 
            title: 'Delivery, Storage and Moving', 
            total: 6, 
            id: 3 
        }
    ];

    return {
        GetServices: function () {
            return servicesData;
        },
        GetServiceById: function () {
            // do stuff here to get the service by id
        }
    }
}])

just add method getServiceById to ServicesData and inject ServicesData to ServiceCtrl -- you get what you want. — Petr Averyanov
– Petr Averyanov, Commented Jan 18, 2016 at 0:43

Alexander Elgin · Accepted Answer · 2016-01-18 01:29:56Z

2

angular.module('starter.services', [])

.service("ServicesData", [function () {

    var servicesData = [
        { 
            title: 'Car Repair and Maintenance', 
            total: 7, 
            id: 1 
        },
        { 
            title: 'Cleaning', 
            total: 1, 
            id: 2 
        },
        { 
            title: 'Delivery, Storage and Moving', 
            total: 6, 
            id: 3 
        }
    ];

    return {
        getSelected: function(serviceId) {
          var selectedService;
          
          servicesData.forEach(function(service) {
            if(service.id === serviceId) {
              selectedService = service;
            }
          });
          
          return return selectedService;
        },
        getServices: function () {
            return servicesData;
        }
    }
}])

.controller('ServicesCtrl', ["$scope", "ServicesData", function($scope, ServicesData) {
  $scope.services = ServicesData.setServices();
}])

.controller('ServiceCtrl', function($scope, $stateParams) {
  $scope.service = ServicesData.getSelected($stateParams.service);//the param name should be defined in the route config
});

<!--services.html-->

    <ion-list>
        <ion-item ng-repeat="service in services" href="#/app/services/{{service.id}}" class="item-icon-right">
            {{service.title}} 
            <i class="icon ion-chevron-right icon-accessory">
                <span class="badge badge-positive">{{service.total}}</span>
            </i>
        </ion-item>
    </ion-list>

<!--service.html-->

<ion-view view-title="Playlist">
    <ion-content>
        <h1>{{service.name}}</h1>
    </ion-content>
</ion-view>

edited Jan 18, 2016 at 1:29

answered Jan 18, 2016 at 1:13

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

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

4 Comments

methuselah Over a year ago

Thanks. Is there anything I need to add to app.js? This is what I have so far: pastebin.com/PZphbX44

Alexander Elgin Over a year ago

@methuselah No, I guessed the param name correctly. It should work now

methuselah Over a year ago

Thanks. I've tried it, but now get the following error: ReferenceError: ServicesData is not defined.

methuselah Over a year ago

Ok I fixed it by updating ServiceCtrl to

.controller('ServiceCtrl', function($scope, ServicesData, $stateParams) {   $scope.service = ServicesData.getSelected($stateParams.service); });

Collectives™ on Stack Overflow

Share data between controllers in Ionic Framework/Angular JS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related