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方法。