I have very simple Ionic popover code which is following:
<div>
<a href="" ng-click="openPopover()">Open Popup</a>
</div>
<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>
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.
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