Ionic Javascript Popover

这是一个将显示在常规视图上方的视图。

使用Popover

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

添加popover有三种方法。第一个是 fromTemplate 方法，它允许使用内联模板。添加popover的第二种和第三种方法是使用 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
   });
})

如上所述，添加popover的第二种和第三种方法是使用 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
   });
})

现在，我们将带有模板的脚本添加到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>

无论我们从上面的例子中选择什么，输出总是相同的。

Popover Js

下表显示了可以使用的 $ ionicPopover 方法。

方法	选项	类型	详细
initialize(options)	scope, focusFirst, backdropClickToClose, hardwareBackButtonClose	object, boolean, boolean, boolean	Scope用于将自定义范围传递给弹出窗口。默认值是$ rootScope。focusFirstInput用于自动聚焦弹出窗口的第一个输入。backdropClickToClose用于在单击背景时关闭弹出窗口。hardwareBackButtonClose用于在按下硬件后退按钮时关闭弹出窗口。
show($event)	$event	promise	弹出结束显示时解决。
hide()	/	promise	弹出窗口完成隐藏时解决。
remove()	/	promise	弹出切换完成后解决。
isShown()	/	Boolean	如果显示popover则返回true，否则返回false。