İyonik - Javascript Popover

Bu, normal görünümün üzerinde görünecek bir görünümdür.

Açılır Bilgi Penceresini Kullanma

Popover kullanılarak oluşturulabilir ion-popover-viewöğesi. Bu öğe HTML şablonuna eklenmelidir ve$ionicPopover hizmetin denetleyiciye enjekte edilmesi gerekir.

Açılır bilgi penceresi eklemenin üç yolu vardır. İlkifromTemplatesatır içi şablonun kullanılmasına izin veren yöntem. Açılır bilgi penceresi eklemenin ikinci ve üçüncü yolu,fromTemplateUrl yöntem.

Anlayalım fromtemplate yöntemi aşağıda açıklanmıştır.

Fromtemplate Yöntemi için Denetleyici Kodu

.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
   });
})

Yukarıda tartışıldığı gibi, açılır bilgi eklemenin ikinci ve üçüncü yolu, fromTemplateUrlyöntem. Denetleyici kodu her iki yol için de aynı olacaktır.fromTemplateUrl değer.

HTML mevcut bir şablona eklenirse, URL popover.html. HTML'yi şablonlar klasörüne yerleştirmek istiyorsak, URL şu şekilde değişecektir:templates/popover.html.

Her iki örnek de aşağıda açıklanmıştır.

FromTemplateUrl için Denetleyici Kodu

.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
   });
})

Şimdi ekleyeceğiz script açılır pencere işlevini çağırmak için kullandığımız HTML dosyasına şablon ile.

Mevcut HTML dosyasından HTML kodu

<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>

Ayrı bir dosya olarak bir HTML oluşturmak istersek, yeni bir HTML dosyası oluşturabiliriz. templates klasörüne girin ve yukarıda belirtilen örnekte kullandığımızla aynı kodu kullanın script etiketleri.

Yeni oluşturulan HTML dosyası aşağıdaki gibidir.

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

İhtiyacımız olan son şey, açılır pencereyi göstermek için tıklanacak bir düğme oluşturmaktır.

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

Yukarıdaki örneklerden hangi yolu seçersek seçelim, çıktı her zaman aynı olacaktır.

Aşağıdaki tablo, $ionicPopover kullanılabilecek yöntemler.

Yöntem	Seçenek	Tür	Detay
başlat (seçenekler)	kapsam, focusFirst, backdropClickToClose, hardwareBackButtonClose	nesne, boole, boole, boole	Scopeözel kapsamı açılır pencereye geçirmek için kullanılır. Varsayılan $ rootScope'tur.focusFirstInput açılır bilgi penceresinin ilk girişine otomatik odaklanmak için kullanılır. backdropClickToClose arka plana tıklandığında açılır pencereyi kapatmak için kullanılır. hardwareBackButtonClose donanım geri düğmesine basıldığında açılır pencereyi kapatmak için kullanılır.
göster ($ olay)	$ olay	söz vermek	Açılır bilgi penceresinin gösterilmesi bittiğinde çözüldü.
saklamak()	/	söz vermek	Açılır bilgi penceresinin gizlenmesi bittiğinde çözülür.
Kaldırmak()	/	söz vermek	Açılır bilgi penceresinin kaldırılması tamamlandığında çözülür.
gösterilir()	/	Boole	Açılır bilgi penceresi gösteriliyorsa true, yoksa false döndürür.