경로가 변경 될 때 Angular UI Bootstrap 모달을 자동으로 닫는 방법이 있습니까?

경로가 변경 될 때 Angular UI Bootstrap 모달을 자동으로 닫는 방법이 있습니까?

---

모달 내부 템플릿에 링크가 있습니다. 클릭하면 현재 페이지가 변경되지만 오버레이와 모달은 그대로 유지됩니다. ng-click="dimiss()"모달의 모든 템플릿에있는 모든 링크에 추가 할 수 있지만 더 좋은 방법이 있습니까? 예를 들어 성공적인 경로 변경시 자동으로 닫거나 ng-click모든 링크를 처리하기 위해 템플릿 당 하나만 추가 하시겠습니까?

---

경로가 성공적으로 변경 될 때마다 열린 모달이 모두 닫히도록하려면 $routeChangeSuccess이벤트 를 수신하여 중앙 한 곳에서 수행 할 수 있습니다 ( 예 : 앱의 실행 블록).

var myApp = angular.module('app', []).run(function($rootScope, $uibModalStack) {
  $uibModalStack.dismissAll();
}); 

여기서 메서드를 $uibModalStack호출 할 수 있는 서비스가 주입되는 것을 볼 수 있습니다. dismissAll이 호출은 현재 열려있는 모든 모달을 닫습니다.

예, 한 줄의 코드로 중앙에서 모달을 한 곳에서 닫을 수 있습니다. :-)

---

더 나은 방법은 팝업 (모달)이 열릴 때마다 브라우저 뒤로 버튼 클릭 (또는 키보드 뒤로)에서 URL 변경을 중지하고 팝업을 닫는 것입니다. 이것은 내 프로젝트에서 더 나은 사용자 경험을 위해 작동합니다.

모달이 열려 있지 않으면 브라우저 뒤로 버튼이 정상적으로 작동합니다.

사용하다:

$uibModalStack.dismiss(openedModal.key);

또는

$uibModalStack.dismissAll;

샘플 코드 :

.run(['$rootScope', '$uibModalStack',
    function ($rootScope,  $uibModalStack) {       
        // close the opened modal on location change.
        $rootScope.$on('$locationChangeStart', function ($event) {
            var openedModal = $uibModalStack.getTop();
            if (openedModal) {
                if (!!$event.preventDefault) {
                    $event.preventDefault();
                }
                if (!!$event.stopPropagation) {
                    $event.stopPropagation();
                }
                $uibModalStack.dismiss(openedModal.key);
            }
        });
    }]);

---

실제로 Angular UI Bootstrap을 사용하지는 않지만 문서close() 를 보면 $modalInstance객체에 메서드 가있는 것처럼 보입니다 .

따라서 문서 에서 예제를 살펴보면 다음 과 같이 작동합니다.

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
    $scope.items = items;
    $scope.selected = {
        item: $scope.items[0]
    };
    $scope.ok = function () {
        $modalInstance.close($scope.selected.item);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    // this will listen for route changes and call the callback
    $scope.$on('$routeChangeStart', function(){
        $modalInstance.close();
    });
};

도움이되기를 바랍니다.

---

다음과 같이하여이 문제를 해결했습니다.

$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){
$modalStack.dismissAll();
});

---

I am keeping this logic in the modal controller. You can listen to $locationChangeStart event and close modal there. It is also good to remove listener after, especially if you have registered a listener on $rootScope:

angular.module('MainApp').controller('ModalCtrl',['$scope','$uibModalInstance',
function ($scope, $uibModalInstance) {

  var dismissModalListener = $scope.$on('$locationChangeStart', function () {
    $uibModalInstance.close();
  });

  $scope.$on('$destroy', function() {
    dismissModalListener();
  });

}]);

---

check for the respective route condition in the event $stateChangeSuccess and then close the open bootstrap modals globally using the class like this:

$rootScope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){
//hide any open bootstrap modals
  angular.element('.inmodal').hide();
});

If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();

---

Adding this an alternative answer.

Depending on your project, using $uibModalStack.dismissAll() could trigger an error message.

As explained by JB Nizet in this answer, it is caused by dismissAll() rejecting a promise, leading to a 'failure' callback as opposed to a 'success' callback triggered by close().

Said promise rejection could trigger a possibly unwanted error handling procedure.

Given there is no closeAll() in $uibModalStack, I used this:

    var modal = $uibModalStack.getTop();
    while (modal && this.close(modal.key)) {
      modal = this.getTop();
    }

This is the same behaivour as $uibModalStack.dismissAll() but utilizes.close() instead of .dismiss().

I couldn't find any documentation describing public methods for $uibModalStack, thus, in case anybody is interested in using/looking at other methods available on $uibModalStack.

It'll likely be located in \node-modules\angular-ui-boostrap\dist\ui-boostrap-tpls.js and dismissAll() is @ line 4349

Took me a while to find it.

ReferenceURL : https://stackoverflow.com/questions/23762323/is-there-a-way-to-automatically-close-angular-ui-bootstrap-modal-when-route-chan