在离子框架/角JS控制器之间的数据共享 [英] Share data between controllers in Ionic Framework/Angular JS
本文介绍了在离子框架/角JS控制器之间的数据共享的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
什么是共享数据的AngularJS使用服务控制器之间的最佳方式？
例如，当用户选择从℃的项目;离子列表＆gt; 在 services.html ，我想的要显示在 service.html 所选项目的冠军。 {{} service.name} 被一些伪code，我写下来还挺拼出什么，我想要的目的。
services.html
＆LT;离子列表＆gt;
＆LT;离子项目NG重复= HREF =＃/应用程序/服务/ {{service.id}}级=项目图标向右＆GT服务服务;
{{service.title}}
＆LT; I类=图标离子字形右边的图标，附件＆GT;
＆LT;跨度类=徽章徽章阳性＆GT; {{service.total}}＆LT; / SPAN＆GT;
＆LT; I＆GT /;
＆LT; /离子项目＆GT;
＆LT; /离子列表＆gt;
service.html
＆LT;离子查看查看标题=播放列表＆GT;
＆LT;离子含量＆GT;
＆LT; H1＆GT; {{service.name}}＆LT; / H1＆GT;
＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
controller.js
.controller（'ServicesCtrl'，[$范围，ServicesData功能（$范围，ServicesData）{
$ scope.services = ServicesData.GetServices（）
}]）.controller（'ServiceCtrl'，函数（$范围，$ stateParams）{
}）;
services.js
angular.module（'starter.services'，[]）。服务（ServicesData，[功能（）{ VAR servicesData = [
{
标题：汽车维修和保养，
总：7，
ID：1
}，
{
标题：清洁，
总：1，
ID：2
}，
{
标题：派送，仓储和移动'，
总：6，
ID：3
}
]; 返回{
GetServices：功能（）{
返回servicesData;
}，
GetServiceById：功能（）{
//做的东西在这里得到由ID服务
}
}
}]）
解决方案
\r
\r\r
\r angular.module（'starter.services'，[]）\r
\r
。服务（ServicesData，[功能（）{\r
\r
VAR servicesData = [\r
{\r
标题：汽车维修和保养，\r
总：7，\r
ID：1\r
}，\r
{\r
标题：清洁，\r
总：1，\r
ID：2\r
}，\r
{\r
标题：派送，仓储和移动'，\r
总：6，\r
ID：3\r
}\r
];\r
\r
返回{\r
getSelected：功能（服务ID）{\r
VAR selectedService;\r
\r
servicesData.forEach（功能（服务）{\r
如果（service.id ===服务ID）{\r
selectedService =服务;\r
}\r
}）;\r
\r
返回返回selectedService;\r
}，\r
getServices：功能（）{\r
返回servicesData;\r
}\r
}\r
}]）\r
\r
.controller（'ServicesCtrl'，[$范围，ServicesData功能（$范围，ServicesData）{\r
$ scope.services = ServicesData.setServices（）;\r
}]）\r
\r
.controller（'ServiceCtrl'，函数（$范围，$ stateParams）{\r
$ scope.service = ServicesData.getSelected（$ stateParams.service）; //帕拉姆名称应该是在路由配置定义\r
}）; \r
＆LT;！ - services.html - ＆GT;\r
\r
＆LT;离子列表＆gt;\r
＆LT;离子项目NG重复= HREF =＃/应用程序/服务/ {{service.id}}级=项目图标向右＆GT服务服务;\r
{{service.title}}\r
＆LT; I类=图标离子字形右边的图标，附件＆GT;\r
＆LT;跨度类=徽章徽章阳性＆GT; {{service.total}}＆LT; / SPAN＆GT;\r
＆LT; I＆GT /;\r
＆LT; /离子项目＆GT;\r
＆LT; /离子列表＆gt;\r
\r
＆所述;！ - service.html - ＆GT;\r
\r
＆LT;离子查看查看标题=播放列表＆GT;\r
＆LT;离子含量＆GT;\r
＆LT; H1＆GT; {{service.name}}＆LT; / H1＆GT;\r
＆LT; /离子含量＆GT;\r
＆LT; /离子视图＆gt; \r
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
}
}
}])
解决方案
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>
这篇关于在离子框架/角JS控制器之间的数据共享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
