bug: Multiple popover have all the same scope since beta.14

[kristianbenoit]

Type: bug

Platform: all

If there is multiple popover in the same page, for example in a list, they all get the same scope.

The problem is not present when using beta13, but is in beta.14 and rc.0.

Remove one popover and you can't open the other ones ... (reopen the same one)

Here's a pen that show the bug.:
http://codepen.io/kbenoit/pen/OPZoeV

[kristianbenoit]

Here's a workaround, it implies creating the popover just in time and removing it when it is hidden:
http://codepen.io/kbenoit/pen/emrPdr

The problem is that popover act as a singleton, all popover have reference to the last one created. That's why instantiating the popover just in time works.

[alejandromagnorsky]

+1. Was quite hard to detect what was going on exactly.

[Fayozjon]

Alejandro

http://noanavaro.de/youtube_range

13.03.2015, 02:26, "Alejandro Magnorsky" notifications@github.com:+1. Was quite hard to detect what was going on exactly.

—Reply to this email directly or .

[sirhoe]

+1, Please look into this.

[alejandromagnorsky]

I tried again @kristianbenoit solution, but now is not even working in his codepen if we update to ionic.rc.3.
Please, this was working before until beta.14 was released...

[nutboltu]

+1

[kristianbenoit]

I confirm the workaround I proposed does not work anymore in 1.0.0-rc.3 and nightly.

[YongdeCHEN]

+1, Someone know the solution for the bug?

[kristianbenoit]

@YongdeCHEN, so far use my work around with ionic-1.0.0-rc.2

[alejandromagnorsky]

@brodykidd, this is the issue I mentioned in the email ;)
Just in case you need to update the status.

[ghost]

+1

[liyo]

could this issue also be related? http://codepen.io/anon/pen/yNPmvL

[kristianbenoit]

@liyo, that's the same problem. Using the solution I provided above should fix your problem (create the popover in the ng-click handler).

[alejandromagnorsky]

@kristianbenoit, what about version 1.0.0? Your solution doesn't work with the "stable" version, right?
Thanks anyway.

[alejandromagnorsky]

@kristianbenoit, actually I tried your method with the latest version and it worked! Great, thanks.

[liyo]

@kristianbenoit thank you, I was able to make it work with the latest Ionic version and your method. To avoid an infinite loop when popovers were removed on hide (because for some reason popover.hidden is still firing on remove), I had to manually remove the popover backdrop DOM elements manually, see: http://codepen.io/liyo/pen/XbZreg

[kristianbenoit]

@alejandromagnorsky, as @liyo says, there is an issue involving an infinite loop in the previous solution, where we call popover.remove while on "popover.hidden", at this point the popover is not hidden yet so on "popover.hidden" is called again. Solution, call stopListening() before popover.remove.

$scope.$on('popover.hidden', function() {
      stopListening();
      popover.remove();
});

Here's a pen with a working solution.

http://codepen.io/kbenoit/pen/BNVomX

[kristianbenoit]

@liyo, the pen you provided, does not remove the popover (it's leaking DOM elements). Did you forget to click save ?

[liyo]

@kristianbenoit yes indeed I forgot to save, I have updated it now just for reference.
Anyway, your new solution works great and there is no need to do a manual DOM removal of popover elements. Thank you!

[digitaluprising]

This works great. However, the weird thing is that it doesn't appear to work in ionic view, but it works in ionic serve, the emulator, and when I deployed it natively to my iOS device.

[digitaluprising]

Nevermind. Solution works fine. I realized that my reference to my template was wrong. I named it popOver.html and didn't realize that my URL was pointing to popover.html... 😢

[shaoner]

Edit:
I've just had the same issue.
It seems to be related on how the options are handled in $ionicPopover.fromTemplateUrl.

return $ionicModal.fromTemplateUrl(url, ionic.Utils.extend(POPOVER_OPTIONS, options || {}));

So multiple calls to $ionicPopover.fromTemplateUrl overwrites POPOVER_OPTIONS.

It works better using something like this:

return $ionicModal.fromTemplateUrl(url, ionic.Utils.extend({}, POPOVER_OPTIONS, options));