Ionic Popover Works on XCode Simulator but not on iPhone

#1

I have an Ionic Popover on my app. The popover appears when I run ionic serve, ionic emulate ios, and the XCode simulator. However, as soon as I simulate the app to my iPhone 4S on XCode or use the Ionic View app to view my own application, the popover does not appear. I’ve debugged EVERYTHING and the code does not work. No errors appear on my console when running the app.

Once in a blue moon the popover will appear on my 4S, but there is no logic to how the popover appears. I would change a piece of code, the popover appears, then when I change it again, the popover disappears. I repeat this process and go back to my old code version that worked and it doesn’t work. This is frustrating. What’s worse I fear no one will respond to this message. Any help as to why there is a discrepancy between the iPhone simulator and my actual iPhone would be great. Thanks.

#2

Coul you provide some code examples?

#3

Are you calling the popover on click (ng-click) or using on-tap?

#4

on-tap. I’ve tried ng-click as well but neither work.

#5

Here it is.

Button HTML

    <div ng-controller="FilterPopoverController as filterPopover"    class="text-right">
      <div on-tap="filterPopover.open()" ng-class="{filterButtonOpened: filterPopover.opened}"  id="filter-button">
        <span class="assertive" >
          <i class="icon ion-arrow-down-b"></i>
          <span class="bold">FILTER</span>
        </span>
      </div>
    </div>

Popover HTML

<ion-popover-view id="filterPopover">
  <ion-header-bar class="bar-dark">
    <h1 id="popoverTitle" class="bold">FILTER BY</h1>
  </ion-header-bar>

  <ion-content>
    <p>Content here</p>
  </ion-content>
</ion-popover-view>

The Popover Controller

.controller('FilterPopoverController', filterPopoverController)

filterPopoverController.$inject = ['$ionicPopover', '$filter', '$scope', '$timeout'];

function filterPopoverController($ionicPopover, $filter, $scope, $timeout) {
  var vm = this;

  vm.open = open;

  vm.popover = null;

  vm.opened = false;

  activate();

  //Cleanup the popover when we're done with it!
  $scope.$on('$destroy', function() {
    vm.popover.remove();

    vm.opened = false;
  });

  $scope.$on('popover.hidden', function() {
    vm.opened = false;
  });

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



  function open(  ) {
      vm.opened = true;

      vm.popover.show();
  }
}

I’ve had to remove sensitive info from some of this code but this is the gist of it.