Ionic - Javascript 弹出窗口

---

该视图将出现在常规视图之上。

使用弹出窗口

可以使用ion-popover-view元素创建 Popover。应将此元素添加到 HTML 模板中，并且需要将$ionicPopover服务注入到控制器中。

添加弹出框的方法有3种。第一个是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
   });
})

现在，我们将带有模板的脚本添加到 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 作为单独的文件，我们可以在templates文件夹中创建一个新的 HTML 文件，并使用与上述示例中使用的代码相同的代码，但不带脚本标签。

新创建的 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方法。