0

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.

Amir
  • 1,031
  • 2
  • 19
  • 42

2 Answers2

0

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

Amir
  • 1,031
  • 2
  • 19
  • 42
-1

Try this one

   <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="popover.hide();"></i>
        </div>          
    </div>
    <div class="row">
        <div class="col col-100">
            <p>
                {{ 'Some content here' }}
            </p>
        </div>
    </div>
   </ion-content>
  </ion-popover-view>
NagaPrasad
  • 44
  • 3
  • That code have exactly same effect that I have stated above. Doesn't help. – Amir Oct 09 '16 at 07:20
  • I tested the same code of mine in new project and it seemed to work fine but whenever I refresh again, this time the css styles go so badly messy and even angular functions doesn't work (it's like bindings of function has been eradicated between the dom component and angular function). I start to think that this is a bug of ionic framework. – Amir Oct 09 '16 at 07:25