Ionic - Javascript 彈出框

這是一個顯示在常規檢視上方的檢視。

使用彈出框

可以使用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放置到templates資料夾中，則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檔案中，我們使用它來呼叫彈出框函式。

現有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作為單獨的檔案，可以在templates資料夾中建立一個新的HTML檔案，並使用與上述示例中使用的相同程式碼，無需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方法。