Popover Does Not Display When Opened

Question

I set up a basic example with Ionic Popover. However, when I open the popover, the opacity stays at zero, preventing the popover from showing. I know the method openPopover is called because I receive the opened console log in my web console. If I remove the opacity property from the console, the popover displays.

My controller..

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);
  }
}

My view page...

<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>

My popover template.

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

Why does the popover not show and how can I fix this?

Answer 1

I did some digging in the ionic CSS for popover, and the opacity is set to 0 by default. You can override the opacity to 1 and the popover will display, but I found this: https://github.com/driftyco/ionic/issues/2343. Basically, you have to pass the event ($event) to popover.show() and it will work. The ionic example shows this but the documentation could be more explicit. In your code, change your template to ng-click="searchResults.openPopover($event)".