루트가 변경되면 Angular UI Bootstrap Modal을 자동으로 닫는 방법이 있나요?

루트가 변경되면 Angular UI Bootstrap Modal을 자동으로 닫는 방법이 있나요?

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

루트가 정상적으로 변경될 때마다 열려 있는 모든 모달들을 닫는 경우, 루트를 1개의 중앙 위치에서 재생함으로써 실행할 수 있습니다.$routeChangeSuccess이벤트(예: 앱의 실행 블록):

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

여기서 볼 수 있듯이$uibModalStack서비스가 주입되어 콜할 수 있습니다.dismissAllmethod - 이 호출은 현재 열려 있는 모든 모듈을 닫습니다.

네, 한 줄의 코드를 사용하여 한 곳에서 중앙에서 닫히는 모달들을 처리할 수 있습니다. :-)

더 좋은 방법은 팝업(모달)이 열려 있을 때마다 브라우저의 뒤로 버튼 클릭(또는 키보드 뒤로)에서 URL 변경을 중지하고 팝업만 닫는 것입니다.이것은, 프로젝트의 유저 익스피리언스를 향상시키는 데 도움이 됩니다.

[ Browser Back ](브라우저 되돌리기) 버튼은 열려 있는 모듈이 없으면 정상적으로 동작합니다.

용도:

$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 부트스트랩을 사용하지 않지만 문서를 보면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();
});

나는 이 논리를 모드 컨트롤러에 보관하고 있다.들으실 수 있습니다.$locationChangeStart이벤트를 수행하고 모드를 닫습니다.청취자를 등록한 경우 청취자를 삭제해 두는 것도 좋습니다.$rootScope:

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

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

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

}]);

이벤트 내의 각 경로 상태를 확인합니다.$stateChangeSuccess다음 클래스를 사용하여 오픈부트스트랩모듈을 글로벌하게 닫습니다.

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

각도 재료 대화 상자(예: 다른 모달)를 숨기려는 경우$mdDialogSweet Alert 대화상자 사용angular.element('.modal-dialog').hide();&angular.element('.sweet-alert').hide();

이것을 다른 답변으로 추가한다.

프로젝트에 따라 사용$uibModalStack.dismissAll()에러 메시지를 트리거 할 수 있습니다.

이 답변에서 JB Nizet에 의해 설명되었듯이, 이 원인은 다음과 같습니다.dismissAll()약속을 거부하여 에 의해 트리거된 '성공' 콜백이 아닌 '실패' 콜백으로 이어집니다.close().

해당 약속 거부는 원치 않는 오류 처리 절차를 트리거할 수 있습니다.

경우, 「」는 존재하지 않습니다.closeAll()$uibModalStack

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

은 것은와 this this this this this this this this this this this this this this this this this this this this this와 같은 행동입니다.$uibModalStack.dismissAll(), 기능을 활용합니다..close().dismiss().

을 설명한 문서를 찾을 수 $uibModalStack 때문에 이 밖에도 사람이 $uibModalStack.

it할것 it it it it it it에 있을 예요.\node-modules\angular-ui-boostrap\dist\ui-boostrap-tpls.js ★★★★★★★★★★★★★★★★★」dismissAll()@ @ line 4349

찾는 데 시간이 좀 걸렸어요

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