How can I build a service that can be called from everywhere I need with a custom param.
I have this code:
.service('loadingService', function($ionicLoading) {
this.showLoading=function(textToBeDisplayed){
$ionicLoading.show({
noBackdrop: false,
templateUrl: 'templates/loading-template.html'
});
};
this.hideLoading=function(){
$ionicLoading.hide();
};
});
View: (loading-template.html)
<div>{{textToBeDisplayed}}<ion-spinner icon="ios"/></div>
Controller:
loadingService.showLoading('loading all data');
Loading is displayed but "textToBeDisplayed" is not visible in the view.
Any ideeas ?
Thanks
I think your service should use template as you are passing template content
.service('loadingService', function($ionicLoading) {
this.showLoading=function(textToBeDisplayed){
$ionicLoading.show({
noBackdrop: false,
template: '<div>'+textToBeDisplayed+'<ion-spinner icon="ios"/></div>'
});
};
this.hideLoading=function(){
$ionicLoading.hide();
};
});
Just do this:
.service('loadingService', function($rootScope) {
return function(textToBeDisplayed) {
$rootScope.textToBeDisplayed = textToBeDisplayed;
//put whatever else you want here.
}
});
call it like this in your controller:
loadingService('someText');
Put this binding in your HTML:
{{textToBeDisplayed}}
Don't forget to inject the service into any controller you need to access it from.