我想在离子中创建自定义版本的消息框。该函数使用$ionicPopup
。
$myShowPopup = function() {
$scope.data = {};
$ionicPopup.show({
subTitle: 'There is no network connection right now.',
scope: $scope,
buttons: [
{ text: 'Got it'
type: 'button clear'},
]});
}
我需要在多个地方调用该函数,例如,在下面的app.js代码中。它应该在哪里定义?
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives'])
.run(function ($ionicPlatform, $ionicPopup) {
$ionicPlatform.ready(function () {
......
// Need to call it here
......
})
.config(function ($resourceProvider) {
angular.forEach($resourceProvider.defaults.actions, function (action) {
action['interceptor'] = {
responseError: function (httpResponse) {
......
// And here.
......
}
};
})
});
答案 0 :(得分:1)
听起来像使用service
的最佳做法。但是,为了依赖于app.config()
阶段,service
被定义为provider
,需要做很多工作。
在线演示 - https://plnkr.co/edit/jdDPepAbn9UXkdVsDR5L?p=preview
var app = angular.module('plunker', ['ionic']);
app.controller('MainCtrl', function($scope, $http) {
$scope.test = function(){
$http.get('http://asdasd.does-not-exist');
}
});
app.run(function($ionicPlatform, interactiveService) {
$ionicPlatform.ready(function() {
interactiveService.showPopup('Welcome!');
});
});
app.provider('interactiveService', function() {
this.$get = ['$ionicPopup', function($ionicPopup) {
return {
showPopup: showPopup
};
function showPopup(message) {
$ionicPopup.show({
subTitle: message,
buttons: [{
text: 'Got it',
type: 'button clear'
}, ]
});
}
}];
});
app.config(function($provide, $httpProvider) {
$provide.factory('httpInterceptor', function($q, $injector) {
return {
response: function(response) {
return response || $q.when(response);
},
responseError: function(rejection) {
var interactiveService = $injector.get('interactiveService');
if (rejection.status === 0 || rejection.status === -1) {
interactiveService.showPopup('There is no network connection right now.');
}
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('httpInterceptor');
});
答案 1 :(得分:1)
我认为在$ionicPopup
周围编写一个包装器是个好主意。这样,提供默认值应该非常容易,甚至可以替换这些默认值。另外一个优点在于,如果您需要,可以很容易地将$ionicPopup
与另一个弹出式实现交换。
编写这样的包装器的最佳方法是创建一个角度service
。
angular.module('myPopup', ['ionic', '_'])
.service(function ($ionicPopup) {
var service = {
showPopup: showPopup
}
return service;
function showPopup(options) {
var settings = _.defaultsDeep(options, {
subTitle: 'There is no network connection right now.',
buttons: [
{
text: 'Got it'
type: 'button clear'
},
]
});
$ionicPopup.show(settings);
}
})
正如您所见,我正在使用_.defaultsDeep。这很有用,因为您可以为showPopup提供自己的选项,如果没有给出选项,则默认为其他选项。
您可以通过执行以下操作,随时随地调出弹出窗口:
myPopup.showPopup();
可以添加自己的选项,因此如果要覆盖subTitle,则可以执行以下操作:
var options = {
subTitle: 'my custom subtitle'
};
myPopup.showPopup(options);
答案 2 :(得分:-1)
为此功能创建工厂,无论您需要此功能,只需注入并调用该功能。另一个更好的解决方案是为弹出窗口创建一个指令。您可以轻松地重复使用它。