programing

어디서든 Angular UI 모드를 닫는 방법

iphone6s 2023. 3. 28. 21:20
반응형

어디서든 Angular UI 모드를 닫는 방법

Angular UI 부트스트랩모달 대화 상자를 사용하여 서비스 내에서 만들고 있습니다.

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()콘트롤러나 뭐 그런 걸로요?

를 주입합니다.$modalStackservice and call$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);
        }
    };
}]);

브라우저의 뒤로 버튼 라우팅과 팝업 닫힘을 방지하기 위해 아래 행을 추가하였습니다.각도 컨트롤러에 $modalStack을 삽입해야 합니다.

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

이렇게 해서 공장이나 추가 코드를 사용하지 않고 프로젝트에서 작업할 수 있게 되었습니다.

  //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  

                });

이것이 올바른 방법인지는 모르겠지만, 나에게는 효과가 있다.

언급URL : https://stackoverflow.com/questions/25445949/how-to-close-angular-ui-modal-from-anywhere

반응형