Question

我目前正在使用phonegap，尝试使用onsen UI创建popover。我有一个问题，显示不同的弹出屏幕。不知道这里有什么问题。

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代码

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

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

您可以在开头创建所有这些内容并将其存储在$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

希望它有所帮助！

我可以在一个单独的HTML中有多个ons-popover吗？

1 个答案: