AngularJS : display param from a service in a view

Question

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 you need to set the textToBeDisplayed on that scope being used. I'm not familiar with $ionicLoading but the documentation mentions a scope option... — bm1729
– bm1729, Commented Apr 9, 2015 at 16:11
it's working if I move all the code in my controller, define have a $scope.textToBeDisplayed and add "scope=$scope" to $ionicLoading . But I wanted to have something generic..loadingService.showLoading('loading all data'); — godzo101
– godzo101, Commented Apr 9, 2015 at 16:30
because I don't want to add everywhere in my app, in all controller all this code — godzo101
– godzo101, Commented Apr 9, 2015 at 16:31

tpie · Accepted Answer · 2015-04-09 16:44:50Z

3

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.

plnkr: http://plnkr.co/edit/n1LdDAG8k9C1JC7qBDyM?p=preview

edited Apr 9, 2015 at 16:44

answered Apr 9, 2015 at 16:31

tpie

6,2393 gold badges24 silver badges41 bronze badges

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

1 Comment

godzo101 Over a year ago

I'm don't know if is a good practice to add many things on rootScope :) is there any way to clean that var from rootscope when I hide the loading ?

Pankaj Parkar · Accepted Answer · 2015-04-09 16:30:00Z

2

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();
    };  
});

answered Apr 9, 2015 at 16:30

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

godzo101 Over a year ago

this is a good solution even if I wanted to have template in a separate html file :) .. until I find a better solution I will use this

tpie Over a year ago

This is a better specific solution for this case.

Collectives™ on Stack Overflow

AngularJS : display param from a service in a view

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related