📌  相关文章
📜  离子-Javascript Popover

📅  最后修改于: 2020-12-08 05:09:17             🧑  作者: Mango

此视图将显示在常规视图上方。

使用弹出框

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

有三种添加弹出框的方法。第一个是fromTemplate方法，该方法允许使用内联模板。添加弹出窗口的第二种和第三种方法是使用fromTemplateUrl方法。

让我们了解如下所述的fromtemplate方法。

Fromtemplate方法的控制器代码

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
   // .fromTemplate() method
   var template = '' + '' +
      '
Popover Title
' +
      ''+ '' +
      'Popover Content!' + '' + '';

   $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放入模板文件夹，则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代码

如果我们想将HTML创建为单独的文件，则可以在templates文件夹中创建一个新的HTML文件，并使用与上述示例中使用的相同代码而不使用script标签。

新建的HTML文件如下。


   
      
Popover Title

   
    
   
      Popover Content!

我们需要做的最后一件事是创建一个按钮，将其单击以显示弹出窗口。

无论我们从上述示例中选择哪种方式，输出都将始终相同。

Popover Js

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

Method Option Type Detail
initialize(options) scope, focusFirst, backdropClickToClose, hardwareBackButtonClose object, boolean, boolean, boolean Scope is used to pass custom scope to popover. Default is the $rootScope. focusFirstInput is used to auto focus the first input of the popover. backdropClickToClose is used to close popover when clicking the backdrop. hardwareBackButtonClose is used to close popover when hardware back button is pressed.
show($event) $event promise Resolved when popover is finished showing.
hide() / promise Resolved when popover is finished hiding.
remove() / promise Resolved when popover is finished removing.
isShown() / Boolean Returns true if popover is shown or false if it is not.