Amir Al Amir Al - 1 month ago 24
HTML Question

Ionic Popover "freeze" on open

I have very simple Ionic popover code which is following:

html (main-view.html)



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


html (my-view.html)



<ion-popover-view>
<ion-content>
<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>
</div>
<div class="row">
<div class="col col-100">
<p>
{{ 'Some content here' }}
</p>
</div>
</div>
</ion-content>
</ion-popover-view>


controller



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.popover.show($event);
};

$scope.closePopover = function() {
$scope.popover.hide();
};
};


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
closePopover()
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
ion-close
components click listener and everything seems fine. I have tried to recreate the
$ionicPopover
instantiation whenever user opens the popover but nothing works.

All help is appreciated.

Answer

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