Question

背景

我在angularjs应用程序中使用了模态服务。此服务显示我的应用程序中的模式，它工作正常。现在我想使用相同的模态服务为我显示进度条。

问题：

我想使用javascript代码动态关闭模式（没有任何用户点击）。我无法弄清楚如何做到这一点。

这样可以在处理完成时关闭模态进度条。这不涉及用户点击（全部由系统控制）

模态服务代码：

var modalService = function($modal,$sce){
var myModal;
         var modalDefaults = {
            backdrop: true,
            keyboard: true,
            modalFade: true,
            templateUrl: '../ECommon/views/modal.html'
        };

        var modalOptions = {
            closeButtonText: 'Close',
            actionButtonText: 'OK',
            headerText: 'Proceed?',
            bodyText: 'Perform this action?',
            showFooter: true
        };

        this.showModal = function (customModalDefaults, customModalOptions) {
            if (!customModalDefaults) customModalDefaults = {};
            customModalDefaults.backdrop = 'static';
            myModal = this.show(customModalDefaults, customModalOptions);
            return myModal;
        };

        this.show = function (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;
        };
}

从触发对话框的控制器调用：

$scope.logout = function(){
        var modalOptions = {
            closeButtonText: 'W',
            actionButtonText: 'WLogout',
            headerText: 'Logout',
            bodyText: "<h1>WELCOME </h1>"
        };

        var modal = modalService.showModal({}, modalOptions).then(function (result) {
         console.log(result);
        });
}

Answer 1

我深入研究doc并发现你可以使用$ modalStack服务在任何地方关闭打开的模态:)

所以使用

$modalStack.dismiss("Close");

进度完成时

PS： - 别忘了在DI中注入$ modalStack。

关闭由angularjs ui模态服务使用javascript创建的模态

1 个答案: