如何在promise解析之前关闭$ modal(ui.bootstrap.modal)

时间:2015-02-20 12:11:29

标签: angularjs angular-ui-bootstrap bootstrap-modal

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

0 个答案:

没有答案