javascript - Popover Does Not Display When Opened - Stack Overflow

admin管理员组

文章数量:1306684

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?

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?

• javascript
• css
• angularjs
• ionic-framework

Share Improve this question Follow edited Jun 17, 2015 at 19:18 thank_you asked Jun 17, 2015 at 19:03 thank_youthank_you 11.1k1919 gold badges106106 silver badges194194 bronze badges 2

• Same issue here. You e up with a solution? – reptilicus Commented Jul 28, 2015 at 14:11
• In ng-click, you should pass $event parameter to the calling function. – CuriousMind Commented Aug 14, 2015 at 11:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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./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)".

In my case i just didn't put the popover ponent in the entryComponent section in my shared module. I didn’t get an error until I restarted the server, don't know why

本文标签： javascriptPopover Does Not Display When OpenedStack Overflow