Amir Al Amir Al - 11 months ago 104
HTML Question

Ionic Popover "freeze" on open

I have very simple Ionic popover code which is following:

html (main-view.html)

<a href="" ng-click="openPopover()">Open Popup</a>

html (my-view.html)

<div class="row">
<div class="col col-90"><h4>{{ 'Test header' }}</h4></div>
<div class="col col-10">
<i class="ion-close" ng-click="closePopover()"></i>
<div class="row">
<div class="col col-100">
{{ 'Some content here' }}


angular.module('myApp').controller('MainCtrl', function($scope, $rootScope, $ionicPopover){
$ionicPopover.fromTemplateUrl('views/my-view.html', {
scope: $scope,
"backdropClickToClose": false
}).then(function(popover) {
$scope.popover = popover;

$scope.openPopover = function($event){

$scope.closePopover = function() {

The problem here is whenever I run
ionic serve
the code works fine, but when I hit the refresh and ionic server is still running and open the popover again, the
doesn't work at all. Even if I would add an html link inside of it to open other website it won't work.

If I close the ionic server and then reopen it again, it works again as long as I refresh the page.

What could be the problem?

I have checked the
components click listener and everything seems fine. I have tried to recreate the
instantiation whenever user opens the popover but nothing works.

All help is appreciated.

Answer Source

After long inspection and testing I found out that the problem was with <ion-popover-view> component that broke the logic totally. So it seems there is a bug about this component and I have already opened the ticket in Github of Ionic Framework to fix the bug. The issue is located here. Ionic Framework Popover Freeze Issue