Question

如何构建一个可以通过自定义参数从我需要的任何地方调用的服务。

我有这段代码：

.service('loadingService', function($ionicLoading) {
    this.showLoading=function(textToBeDisplayed){
        $ionicLoading.show({
          noBackdrop: false,
          templateUrl: 'templates/loading-template.html'
        });
    };
    this.hideLoading=function(){
        $ionicLoading.hide();
    };  
});

查看：（loading-template.html）

<div>{{textToBeDisplayed}}<ion-spinner icon="ios"/></div>

控制器：

loadingService.showLoading('loading all data');

显示加载但是＆＃34; textToBeDisplayed＆＃34;在视图中不可见。
任何想法？

由于

Answer 1

这样做：

.service('loadingService', function($rootScope) {
    return function(textToBeDisplayed) {
        $rootScope.textToBeDisplayed = textToBeDisplayed;
        //put whatever else you want here.
    }
});

在你的控制器中这样称呼它：

loadingService('someText');

将此绑定放在HTML中：

{{textToBeDisplayed}}

不要忘记将服务注入您需要访问的任何控制器。

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

Answer 2

我认为您的服务应该在传递模板内容时使用template

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

AngularJS：显示视图中服务的参数

2 个答案: