[英]Share data between controllers in Ionic Framework/Angular JS
使用AngularJS中的服务在控制器之间共享数据的最佳方法是什么?
例如,当用户从services.html中的<ion-list>
中选择一个项目时,我希望所选项目的标题显示在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
}
}
}])
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.