Ionic - Javascript Popover

นี่คือมุมมองที่จะปรากฏเหนือมุมมองปกติ

ใช้ Popover

สามารถสร้าง Popover ได้โดยใช้ ion-popover-viewธาตุ. ควรเพิ่มองค์ประกอบนี้ในเทมเพลต HTML และไฟล์$ionicPopover ต้องฉีดบริการเข้าไปในตัวควบคุม

มีสามวิธีในการเพิ่มป๊อปโอเวอร์ อันแรกคือfromTemplateวิธีการซึ่งอนุญาตให้ใช้เทมเพลตแบบอินไลน์ วิธีที่สองและสามในการเพิ่มป๊อปโอเวอร์คือการใช้ไฟล์fromTemplateUrl วิธี.

ให้เราเข้าใจ fromtemplate วิธีการตามที่อธิบายด้านล่าง

รหัสตัวควบคุมสำหรับวิธี Fromtemplate

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
   // .fromTemplate() method
   var template = '<ion-popover-view>' + '<ion-header-bar>' +
      '<h1 class = "title">Popover Title</h1>' +
      '</ion-header-bar>'+ '<ion-content>' +
      'Popover Content!' + '</ion-content>' + '</ion-popover-view>';

   $scope.popover = $ionicPopover.fromTemplate(template, {
      scope: $scope
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

ตามที่กล่าวไว้ข้างต้นวิธีที่สองและสามในการเพิ่มป๊อปโอเวอร์คือการใช้ fromTemplateUrlวิธี. รหัสคอนโทรลเลอร์จะเหมือนกันสำหรับทั้งสองวิธียกเว้นfromTemplateUrl มูลค่า.

หากเพิ่ม HTML ลงในเทมเพลตที่มีอยู่ URL จะเป็นไฟล์ popover.html. หากเราต้องการวาง HTML ในโฟลเดอร์แม่แบบ URL จะเปลี่ยนเป็นtemplates/popover.html.

ตัวอย่างทั้งสองได้อธิบายไว้ด้านล่าง

รหัสคอนโทรลเลอร์สำหรับ fromTemplateUrl

.controller('MyCtrl', function($scope, $ionicPopover) {

   $ionicPopover.fromTemplateUrl('popover.html', {
      scope: $scope
   }).then(function(popover) {
      $scope.popover = popover;
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

ตอนนี้เราจะเพิ่มไฟล์ script ด้วยเทมเพลตไปยังไฟล์ HTML ซึ่งเราใช้สำหรับการเรียกใช้ฟังก์ชัน popover

โค้ด HTML จากไฟล์ HTML ที่มีอยู่

<script id = "popover.html" type = "text/ng-template">
   <ion-popover-view>
	
      <ion-header-bar>
         <h1 class = "title">Popover Title</h1>
      </ion-header-bar>
		
      <ion-content>
         Popover Content!
      </ion-content>
		
   </ion-popover-view>
</script>

หากเราต้องการสร้าง HTML เป็นไฟล์แยกต่างหากเราสามารถสร้างไฟล์ HTML ใหม่ในไฟล์ templates และใช้รหัสเดียวกับที่เราใช้ในตัวอย่างข้างต้นโดยไม่มีไฟล์ script แท็ก

ไฟล์ HTML ที่สร้างขึ้นใหม่มีดังนี้

<ion-popover-view>
   <ion-header-bar>
      <h1 class = "title">Popover Title</h1>
   </ion-header-bar>
	
   <ion-content>
      Popover Content!
   </ion-content>
</ion-popover-view>

สิ่งสุดท้ายที่เราต้องการคือสร้างปุ่มที่จะคลิกเพื่อแสดงป๊อปโอเวอร์

<button class = "button" ng-click = "openPopover($event)">Add Popover</button>

ไม่ว่าเราจะเลือกวิธีใดจากตัวอย่างข้างต้นผลลัพธ์จะเหมือนกันเสมอ

ตารางต่อไปนี้แสดงไฟล์ $ionicPopover วิธีการที่สามารถใช้ได้

วิธี	ตัวเลือก	ประเภท	รายละเอียด
เริ่มต้น (ตัวเลือก)	ขอบเขต focusFirst, backdropClickToClose, hardwareBackButtonClose	วัตถุบูลีนบูลีนบูลีน	Scopeใช้เพื่อส่งผ่านขอบเขตที่กำหนดเองไปยัง popover ค่าเริ่มต้นคือ $ rootScopefocusFirstInput ใช้เพื่อโฟกัสอัตโนมัติอินพุตแรกของป็อปโอเวอร์ backdropClickToClose ใช้เพื่อปิดป็อปโอเวอร์เมื่อคลิกฉากหลัง hardwareBackButtonClose ใช้เพื่อปิดป็อปโอเวอร์เมื่อกดปุ่มย้อนกลับของฮาร์ดแวร์
แสดง ($ เหตุการณ์)	$ เหตุการณ์	สัญญา	แก้ไขได้เมื่อการแสดงป๊อปโอเวอร์เสร็จสิ้น
ซ่อน ()	/	สัญญา	แก้ไขได้เมื่อการซ่อนป๊อปโอเวอร์เสร็จสิ้น
ลบ ()	/	สัญญา	แก้ไขได้เมื่อการลบป๊อปโอเวอร์เสร็จสิ้น
isShown ()	/	บูลีน	ส่งคืนค่าจริงหากมีการแสดงป๊อปโอเวอร์หรือเป็นเท็จหากไม่ใช่