Обмен данными между контроллерами в Ionic Framework/Angular JS

Question

Каков наилучший способ обмена данными между контроллерами, использующими сервисы в AngularJS?

Например, когда пользователь выбирает элемент из <ion-list> в services.html, Я хотел бы название выбранного пункта, который будет отображаться в service.html. {{service.name}} - это какой-то псевдокод, который я записал, чтобы описать то, что я пытаюсь достичь.

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

Answer 1

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>