Multiple popovers on same page


#1

Are multiple popovers on the same page supported? If I create 2 popovers, I can see only the first. If I comment out the first, I can see only the second. But both do not seem to be able to coexist. Somewhere else I read that it is a singleton service but don’t see that on the docs pages.

I am using popovers to make dropdown-like menu. One menu provides options that are application-wide (logout, about us, preferences, etc.) The second menu is context sensitive. The two menus are made and handled in two different controllers. Is there a better way to do this in ionic?

Thanks


#2

There can be multiple popover on the same page. When you open the popover you call

popover.show($event);

The popover service uses the $event to get current coordinates of the element. So… an idea would be to use the same $event to open two different popovers BUT using classes with !important to change the position that was set inline.


#3

joseadrian, yes I can see them now, thanks much. I also rejigged them into the same controller.

EDIT-- I had to rejig them into the same controller although this breaks the layers in my code :frowning:

EDIT - by deferring the creation of popover to inside the initial deployment, I can now get it to e coded the way I wanted to :slight_smile:


#4

You can ideally use id attributes and read the same in your controller

<a class="button button-icon icon ion-navicon icon-left" id="about" ng-click="popit($event)"></a>
<a class="button button-icon icon ion-search icon-right" id="search" ng-click="popit($event)"></a>

Now, in your controller you can check for the id using ‘$event.target.id’ and load the corresponding template.


#5

Hi all,
I had this problem too, i solved it by defining a click event for each of the objects with a popover then only showing the popover once the template has finished loading…like this:

$scope.openPopover = function($event) {
$ionicPopover.fromTemplateUrl(‘templates/popover/date.html’,
{
scope: $scope
}).then(function(popover) {
$scope.popover = popover;

                //only show after template has loaded
                $scope.popover.show($event);
            });



        $scope.closePopover = function() {
            $scope.popover.hide();
        };
        //Cleanup the popover when we're done with it!
        $scope.$on('$destroy', function() {
            $scope.popover.remove();//remember to remove this
        });
    };