Can i have multiple ons-popover in one single html?

Question

im currently working on phonegap, try to create popover using onsen UI. I have a problem to show diffent pop up screen. Not sure what was the issues here.

js code

        ons.createPopover('pickup.html').then(function(popover) {$scope.popover = popover;}); 
        $scope.pk = function(e) {$scope.popover.show(e);};

        ons.createPopover('popover.html').then(function(popover) {$scope.popover = popover;}); 
        $scope.show = function(e) {$scope.popover.show(e);};

html code

ons-button modifier="pickup_icon" id="p1" ng-click="pk('#p1')">Pick UP </ons-button>

<ons-list-item modifier="chevron" class="list-item-container" id="u2" ng-click="show('#u2')">

script code

<!-- Module 1  -->
<script type="text/ons-template" id="pickup.html">
    <ons-popover direction="down" cancelable>
        <div style="text-align: center; opacity: 0.5;">
            <p>Option</p>
            <ons-button modifier="popup_btn" onclick="">Void</ons-button>
            <ons-button modifier="popup_btn" onclick="">Continue</ons-button>
        </div>
    </ons-popover>        
</script>
<!-- Module 2  -->
<script type="text/ons-template" id="popover.html">
  <ons-popover direction="right" cancelable>
    <div style="text-align: center; opacity: 0.5;">
      <p>Customize</p>
            <ons-button modifier="popup_btn" onclick="">+</ons-button>
            <input type="text" class="text-input qty_style" placeholder="1" value="">
            <ons-button modifier="popup_btn" onclick="">-</ons-button>

    </div>
  </ons-popover>
</script>

is anyone having this experience doing phonegap on multiple popover? Thanks

Answer 1

You can have as many popovers as you want, yes.

You create all of them in the beginning and store them inside $scope. Your problem is that you are storing them in the same variable, i.e. overwriting the first popover with the second one. Just name them popover1 and popover2 or whatever you want, like this:

ons.createPopover('pickup.html').then(function(popover) {$scope.popover1 = popover;}); 
$scope.pk = function(e) {$scope.popover1.show(e);};

ons.createPopover('popover.html').then(function(popover) {$scope.popover2 = popover;}); 
$scope.show = function(e) {$scope.popover2.show(e);};

Working here: http://codepen.io/frankdiox/pen/jPgdop

Hope it helps!