ionic popover, TypeError: Cannot read property 'show'

Question

I have a nav button that should show a popover

<ion-nav-buttons side="secondary">
    <button class="button button-icon icon ion-more" ng-click="openPopover($event)"></button>
</ion-nav-buttons>

and this is the controller

.controller('MyController', ['$scope','$ionicPopover', function($scope, $ionicPopover) {

    $ionicPopover.fromTemplateUrl('popover.html', {
      scope: $scope
    }).then(function(popover) {
      $scope.popover = popover;
    });
    $scope.openPopover = function($event) {
      $scope.popover.show($event);
    };
    $scope.closePopover = function() {
      $scope.popover.hide();
    };
    $scope.$on('$destroy', function () {
        $scope.popover.remove();
    });

}])

but when I click on the nav button I face the TypeError: Cannot read property 'show' of undefined at Scope.$scope.openPopover

here is the template which I have in the same project folder

<ion-popover-view>
  <ion-content>
    <div class="list">
      <label class="item item-input" ng-click="addFavorite(dish.id)">
        <div class="input-label">
          Add To Favorites
        </div>
      </label>
      <label class="item item-input" ng-click="openModal()">
        <div class="input-label">
          Add A Comment
        </div>
      </label>
    </div>
  </ion-content>
</ion-popover-view>

Is popover being returned correctly by the promise? Is your template right? — tpsilva, Aug 23 '16 at 13:56
@tpsilva can you plz explain more about promise? how should I check the popver is returend correctly? the template is correct (the template provided by official document) — Amir-Mousavi, Aug 23 '16 at 14:25
@tpsilva I added the code for template, I assume it is correct — Amir-Mousavi, Aug 23 '16 at 14:30

score 1 · Answer 1 · answered Aug 23 '16 at 14:34

Fiddle with the expected behavior.

<div ng-click="openPopover($event)">
   Click to open popover
</div>

<script id="popover.html" type="text/ng-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>
</script>

The only situation I can think of is that you don't have the template with id "popover.html" defined.

score 0 · Answer 2 · answered May 16 '17 at 14:16

Most probably the problem here is that the popover.html file is saved somewhere in a subfolder like 'templates' or similar and the controller referring to the html file has not a full qualified path respectively the script just does not find the file popover.html.

ionic popover, TypeError: Cannot read property 'show'

2 Answers2