Angular UI Bootstrap Modal - 如何防止打开多个模式答案

【问题标题】：Angular UI Bootstrap Modal - how to prevent multiple modals openingAngular UI Bootstrap Modal - 如何防止打开多个模式
【发布时间】：2013-11-11 10:32:42
【问题描述】：

我已经实现了 modal 指令，并将 $modal.open 选项背景设置为 false。但是，现在我可以触发多个模式打开。有没有办法阻止触发按钮在一个模式打开后触发？

var accountSummaryCtrl = function ($scope, $modal, $log) {

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: '/Apps/generic/modal/Templates/AccountSummary.html',
            controller: ModalInstanceCtrl,
            backdrop: false
        });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
};

谢谢

【问题讨论】：

打开模态时禁用按钮

标签： angularjs angular-ui-bootstrap

【解决方案1】：

使用布尔标志来避免它：

var accountSummaryCtrl = function ($scope, $modal, $log) {

    var opened = false;

    $scope.open = function () {

        if (opened) return;

        var modalInstance = $modal.open({
            templateUrl: '/Apps/generic/modal/Templates/AccountSummary.html',
            controller: ModalInstanceCtrl,
            backdrop: false
        });

        opened = true;

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
            opened = false;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
            opened = false;
        });
    };
};

【讨论】：

您能解释一下这是如何工作的吗？我看到var opened = false; 后面跟着if(opened) return; 我看不出这是如何解决任何问题的，即使您确实有 2 个赞成票。 var opened = false 是否属于$scope.open 函数之外
你是对的。 var opened = false; 是错误的地方。我刚刚纠正了它。谢谢。

【解决方案2】：

我做了一个简单的指令，它使用与 J. Bruni 的回答中相同的技术。

/**
 * Directive which helps to prevent multiple modals opened when clicking same button many times.
 *
 * Just replace "ng-click" with "open-single-modal" in your html. Example:
 *
 * <button open-single-modal="openModal()">Open Window</button>
 *
 * NOTICE! "openModal()" function must return modalInstance which is a result of "$uibModal.open()"
 */
app.directive('openSingleModal', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var opened = false;

            element.bind('click', function () {
                if(opened) {
                    return;
                }

                opened = true;
                var modalInstance = scope.$eval(attrs.openSingleModal);

                if(!modalInstance || !modalInstance.result || typeof modalInstance.result.then !== 'function') {
                    console.error('Incorrect modal instance returned from the open modal function', element, modalInstance);
                    return;
                }

                modalInstance.result.then(function () {
                    opened = false;
                }, function () {
                    opened = false;
                });
            });
        }
    };
});

要切换此指令的代码，只需将“ng-click”更改为“open-single-modal”，ng-click 触发的函数必须返回模态实例。

示例。之前：

<a ng-click="openModal()">Open Me!</a>

之后：

<a open-single-modal="openModal()">Open Me!</a>

和

$scope.openModal = function() {
    return $uibModal.open(...);
};

【讨论】：

【解决方案3】：

J Bruni 的回答非常好，但不要使用其他变量，而是使用 modalInstance 已有的变量。由于您将模态实例声明得更高，因此您还可以灵活地在其他地方使用该变量（例如，当您可能想要关闭对话框时）。

    link: function(scope, element, attrs) {
        var modalInstance;        /*assign to undefined if you like to be explicit*/

        element.bind('click', function () {
            if(modalInstance) {
                return;
            }

            modalInstance = scope.$eval(attrs.openSingleModal);

            if(!modalInstance || !modalInstance.result || typeof modalInstance.result.then !== 'function') {
                console.error('Incorrect modal instance returned from the open modal function', element, modalInstance);
                return;
            }

            modalInstance.result.then(function () {
                modalInstance = undefined;
            }, function () {
                modalInstance = undefined;
            });
        });
    }

【讨论】：