ไอออนิก - Javascript Modal

เมื่อเปิดใช้งานอิออนโมดอลบานหน้าต่างเนื้อหาจะปรากฏที่ด้านบนของเนื้อหาปกติ Modal เป็นป๊อปอัปขนาดใหญ่โดยทั่วไปพร้อมฟังก์ชันการทำงานที่มากขึ้น Modal จะครอบคลุมทั้งหน้าจอตามค่าเริ่มต้น แต่สามารถปรับให้เหมาะสมได้ตามที่คุณต้องการ

การใช้ Modal

มีสองวิธีในการใช้โมดอลในไอออนิก วิธีหนึ่งคือการเพิ่มเทมเพลตแยกต่างหากและอีกวิธีหนึ่งคือการเพิ่มที่ด้านบนของไฟล์ 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 modal คือการแทรก 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>

เมื่อเราเปิด Modal มันจะมีปุ่มที่จะใช้สำหรับปิดมัน เราสร้างปุ่มนี้ในเทมเพลต HTML

นอกจากนี้ยังมีตัวเลือกอื่น ๆ สำหรับการเพิ่มประสิทธิภาพโมดอล เราได้แสดงวิธีใช้แล้วscope และ animation. ตารางต่อไปนี้แสดงตัวเลือกอื่น ๆ

ตัวเลือก	ประเภท	รายละเอียด
focusFirstInput	บูลีน	มันจะโฟกัสอัตโนมัติอินพุตแรกของโมดอล
backdropClickToClose	บูลีน	จะเปิดใช้งานการปิดโมดอลเมื่อแตะฉากหลัง ค่าเริ่มต้นเป็นจริง
hardwareBackButtonClose	บูลีน	จะเปิดใช้งานการปิดโมดอลเมื่อคลิกปุ่มย้อนกลับของฮาร์ดแวร์ ค่าเริ่มต้นเป็นจริง