打开时不显示弹出窗口

Question

我用Ionic Popover设置了一个基本的例子.但是,当我打开弹出窗口时,不透明度保持为零,从而阻止弹出窗口显示.我知道openPopover调用该方法是因为我opened在Web控制台中收到了控制台日志.如果我从控制台中删除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>

我的popover模板.

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

为什么弹出窗口没有显示,我该如何解决这个问题？

Answer 1

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