我使用angular和(http://angular-ui.github.io/) - ui.bootstrap.modal来显示一个带有2个按钮的模态OK和Cancel。 在用户选择OK后我希望模态关闭,然后执行承诺,这是一项长期任务(5秒)。
但是现在承诺已经执行,然后对话框已经关闭。
我有一项服务来提供(http://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service)所需的对话。
(function () {
'use strict';
var serviceId = 'modalService';
angular.module('app').factory(serviceId, ['common', '$modal', modalService]);
function modalService(common, $modal) {
var $q = common.$q;
var modalDefaults = {
backdrop: true,
keyboard: true,
modalFade: true,
templateUrl: '/app/templates/modalMessage.html'
};
var modalOptions = {
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?'
};
var service = {
showModal: showModal,
show: show
};
return service;
function showModal(customModalDefaults, customModalOptions) {
if (!customModalDefaults) customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return this.show(customModalDefaults, customModalOptions);
};
function show(customModalDefaults, customModalOptions) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function ($scope, $modalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$modalInstance.dismiss('cancel');
};
}
}
return $modal.open(tempModalDefaults).result;
};
}
})();
我的控制器调用模态
function testCtrl($scope, modalService) {
$scope.test = testDialog;
function testDialog(files, moduleType) {
var modalOptions = {
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: "...",
};
modalService.showModal({ templateUrl: '/app/templates/softProductsConfirmImportModalTemplate.html' }, modalOptions)
.then(function(){
// When it comes here I want the modal to be closed already and then excecute the longProccess();
longProccess();
});
}
})();