我可以在一个 html 中有多个 ons-popover 吗？

Question

我目前正在研究 phonegap，尝试使用温泉创建弹出窗口 UI。我在显示不同的弹出屏幕时遇到问题。不确定这里的问题是什么。

js代码

        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>

有人有过在多个弹出窗口上使用 phonegap 的经验吗？谢谢

Answer 1

您可以拥有任意数量的弹出窗口，是的。

您在开始时创建所有这些并将它们存储在 $scope 中。您的问题是您将它们存储在同一个变量中，即用第二个弹出窗口覆盖第一个弹出窗口。只需将它们命名为 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

希望对您有所帮助！

我可以在一个 html 中有多个 ons-popover 吗？

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

jquery

phonegap-plugins

cordova

onsen-ui