打开时不显示弹出框

Posted 2023-03-06

【中文标题】打开时不显示弹出框

【英文标题】：Popover Does Not Display When Opened

【发布时间】：2015-09-03 04:47:12

【问题描述】：

我使用 Ionic Popover 设置了一个基本示例。但是，当我打开弹出框时，不透明度保持为零，从而阻止弹出框显示。我知道调用openPopover 方法是因为我在我的Web 控制台中收到opened 控制台日志。如果我从控制台中删除 opacity 属性，则会显示弹出框。

我的控制器..

angular.module('search')

.controller('SearchResultsController', searchResultsController)

searchResultsController.$inject = ['$ionicPopover', '$scope'];

function searchResultsController($ionicPopover, $scope) 
  var vm = this;

  vm.openPopover = openPopover;

  activate();

  function activate( ) 
    $ionicPopover.fromTemplateUrl('/templates/search/filter-popover.html', 
      scope: $scope
    ).then(function(popover) 
      console.log(popover)
      vm.popover = popover;
    );
  

  function openPopover( $event ) 
    console.log("opened")
    vm.popover.show($event);
  

我的查看页面...

<ion-view hide-nav-bar="true">
  <signed-in-header></signed-in-header>

  <ion-content class="padding has-header">
    <div class="row">
      <div class="col col-75 text-left">
        <div>4 RESULTS FOR "263355"</div>
      </div>

      <div class="col col-25 text-right">
        <div ng-click="searchResults.openPopover()">
          <i class="icon ion-arrow-down-b"></i>
          Filter
        </div>
      </div>
    </div>
  </ion-content>

  <ion-footer-bar>
    Ad here 1
  </ion-footer-bar>
</ion-view>

我的弹出框模板。

<ion-popover-view>
  <ion-header-bar>
    <h1 class="title">My Popover Title</h1>
  </ion-header-bar>
  <ion-content>
    Hello!
  </ion-content>
</ion-popover-view>

为什么弹出框不显示，我该如何解决这个问题？

【问题讨论】：

这里有同样的问题。你想出了解决办法吗？

在 ng-click 中，你应该将 $event 参数传递给调用函数。

【参考方案1】：

在我的例子中，我只是没有将 popover 组件放在我共享模块的 entryComponent 部分。重启服务器后才报错，不知道是什么原因

【参考方案2】：

我在 ionic CSS 中为 popover 做了一些挖掘，默认情况下不透明度设置为 0。您可以将不透明度覆盖为 1，然后会显示弹出框，但我发现了这个：https://github.com/driftyco/ionic/issues/2343。基本上，您必须将事件 ($event) 传递给 popover.show() 并且它会起作用。离子示例显示了这一点，但文档可能更明确。在您的代码中，将您的模板更改为 ng-click="searchResults.openPopover($event)"。