반응형
어디서든 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
반응형
'programing' 카테고리의 다른 글
| 마운트 해제된 컴포넌트의 Respect - setState() (0) | 2023.03.28 |
|---|---|
| HTML 만들기: PHP 서버 측과 jQuery 클라이언트 측 (0) | 2023.03.28 |
| jq를 사용하여 json의 여러 필드를 순차적으로 구문 분석 및 표시 (0) | 2023.03.28 |
| 서비스에 윈도우를 삽입하는 방법 (0) | 2023.03.28 |
| 파일에서 ESLint react/prop-type 규칙을 비활성화하려면 어떻게 해야 합니까? (0) | 2023.03.28 |