Могу ли я иметь множественные ons-popover в одном html?

Question

im в настоящее время работает над телефонной связью, попробуйте создать popover, используя пользовательский интерфейс onsen. У меня есть проблема, чтобы показать разный всплывающий экран. Не знаете, в чем были проблемы.

код расслоение плотной

 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 код

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')"> 

код сценария

<!-- 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> 

Кто-нибудь, у кого есть этот опыт, делает телефонную связку на нескольких popover? Спасибо

Answer 1

У вас может быть столько popovers, сколько хотите, да.

Вы создаете все из них в начале и храните их внутри $scope. Ваша проблема заключается в том, что вы храните их в одной и той же переменной, то есть перезаписываете первый popover вторым. Просто назовите их popover1 и popover2 или что вы хотите, как это:

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);}; 

Работа здесь: http://codepen.io/frankdiox/pen/jPgdop

Надеется, что это помогает!