web-dev-qa-db-ja.com

閉じる方法AngularどこからでもUIモーダル

Angular UI bootstrap modal dialog を使用して、サービス内で作成します：

_myApp.factory('ModalService', ['$modal', function($modal) {
    return {
        trigger: function(template) {
            $modal.open({
                templateUrl: template,
                size: 'lg',
                controller: function($scope, $modalInstance) {
                    $scope.ok = function() {
                        $modalInstance.close($scope.selected.item);
                    };
                    $scope.cancel = function() {
                        $modalInstance.dismiss('cancel');
                    };
                }
            });
        },
        close: function() {
            // this should close all modal instances
        }
    };
}]);
_

コントローラーまたはその他からModalService.close()を呼び出すときに、すべてのモーダルインスタンスを閉じるにはどうすればよいですか？

angularjsangular-uiangular-ui-bootstrapangularjs-service
39
DonJuwe

_$modalStack_サービスを挿入し、関数$modalStack.dismissAll()を呼び出します。詳細については、 GitHub のコードを参照してください。

_myApp.factory('ModalService', ['$modal', '$modalStack' function($modal, $modalStack) {
    return {
        trigger: function(template) {
            $modal.open({
                templateUrl: template,
                size: 'lg',
                controller: function($scope, $modalInstance) {
                    $scope.ok = function() {
                        $modalInstance.close($scope.selected.item);
                    };
                    $scope.cancel = function() {
                        $modalInstance.dismiss('cancel');
                    };
                }
            });
        },
        close: function(reason) {
            $modalStack.dismissAll(reason);
        }
    };
}]);
_
86
apairet

ブラウザの戻るボタンのルーティングとポップアップの終了を防ぐために、次の行を追加しました。 $ modalStackをangularコントローラーに挿入する必要があります。

event.preventDefault();
            $modalStack.dismissAll('close');
1
Sudha

これは、工場や追加のコードを使用せずに私のプロジェクトで動作させる方法です。

_  //hide any open $mdDialog modals
  angular.element('.modal-dialog').hide();
  //hide any open bootstrap modals
  angular.element('.inmodal').hide();
  //hide any sweet alert modals
  angular.element('.sweet-alert').hide();
_

$rootScope.$emit('logout');としてログアウトを発行するタイムアウト関数があり、私のサービスのリスナーは次のとおりです。

_$rootScope.$on('logout', function () {
                    //hide any open $mdDialog modals
                    angular.element('.modal-dialog').hide();
                    //hide any open bootstrap modals
                    angular.element('.inmodal').hide();
                    //hide any sweet alert modals
                    angular.element('.sweet-alert').hide();

                    //do something else here  

                });
_

これが正しいアプローチであるかどうかはわかりませんが、私にとってはうまくいきます。

0
Sri7

他の場所で同様の質問でこの問題を解決しました。絶対に行く価値があると思います。

https://stackoverflow.com/a/50605541/8471992

0
B3none