Ionic-자바 스크립트 모달

Ionic 모달이 활성화되면 콘텐츠 창이 일반 콘텐츠 위에 나타납니다. 모달은 기본적으로 더 많은 기능을 가진 더 큰 팝업입니다. 모달은 기본적으로 전체 화면을 커버하지만 원하는 방식으로 최적화 할 수 있습니다.

모달 사용

Ionic에서 모달을 구현하는 방법에는 두 가지가 있습니다. 한 가지 방법은 별도의 템플릿을 추가하는 것이고 다른 하나는 일반 HTML 파일 위에 추가하는 것입니다.script태그. 가장 먼저해야 할 일은 각도 의존성 주입을 사용하여 모달을 컨트롤러에 연결하는 것입니다. 그런 다음 모달을 만들어야합니다. 범위를 전달하고 모달에 애니메이션을 추가합니다.

그 후에 모달을 열고 닫고 파기하는 함수를 만들 것입니다. 마지막 두 함수는 모달이 숨겨 지거나 제거되면 트리거되는 코드를 작성할 수있는 곳에 배치됩니다. 기능을 트리거하지 않으려면 모달이 제거되거나 숨겨 질 때 마지막 두 기능을 삭제할 수 있습니다.

컨트롤러 코드

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('my-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
   }).then(function(modal) {
      $scope.modal = modal;
   });
	
   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

HTML 코드

<script id = "my-modal.html" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>
		
      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

마지막 예에서 보여준 방식은 script 태그는 기존 HTML 파일 내에서 모달의 컨테이너로 사용됩니다.

두 번째 방법은 내부에 새 템플릿 파일을 만드는 것입니다. templates폴더. 마지막 예제에서와 동일한 코드를 사용하지만script 태그도 변경해야합니다. fromTemplateUrl 컨트롤러에서 모달을 새로 만든 템플릿과 연결합니다.

컨트롤러 코드

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('templates/modal-template.html', {
      scope: $scope,
      animation: 'slide-in-up',
   }).then(function(modal) {
      $scope.modal = modal;
   });
	
   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

HTML 코드

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>
	
   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

Ionic 모달을 사용하는 세 번째 방법은 HTML을 인라인으로 삽입하는 것입니다. 우리는fromTemplate 대신 기능 fromTemplateUrl.

컨트롤러 코드

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +
		
      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +
		
   '</ion-modal-view>', {
      scope: $scope,
      animation: 'slide-in-up'
   })

   $scope.openModal = function() {
      $scope.modal.show();
   };
	
   $scope.closeModal = function() {
      $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

세 가지 예는 모두 동일한 효과를 갖습니다. 트리거하는 버튼을 만듭니다.$ionicModal.show() 모달을 엽니 다.

HTML 코드

<button class = "button" ng-click = "openModal()"></button>

모달을 열면 닫는 데 사용할 버튼이 포함됩니다. HTML 템플릿에서이 버튼을 만들었습니다.

모달 최적화를위한 다른 옵션도 있습니다. 우리는 이미 사용법을 보여주었습니다scope 과 animation. 다음 표는 다른 옵션을 보여줍니다.

선택권	유형	세부 묘사
focusFirstInput	부울	모달의 첫 번째 입력에 자동 초점을 맞 춥니 다.
BackgroundClickToClose	부울	배경을 탭하면 모달을 닫을 수 있습니다. 기본값은 true입니다.
hardwareBackButtonClose	부울	하드웨어 뒤로 버튼을 클릭하면 모달을 닫을 수 있습니다. 기본값은 true입니다.