1

Moncaca + OnsenUI(Cordova4.1)環境において、ページナビゲーション(<ons-navigator>)下で複数のポップオーバー(<ons-popover>)を使用したいと考えております。

ポップオーバー1つだけなら、可能なのですが、2つポップオーバーを定義するとエラーが出てしまいます。
また、ページナビゲーションを使用しない場合は、2つのポップオーバーを使用出来ました。

もし、複数のポップオーバーを使用したことがある方いらっしゃいましたら、その方法を教えていただけないでしょうか。

以下が、上記を試しているコードとなります。

index.html

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
     <script>
        angular.module('myApp', ['onsen']);

        angular.module('myApp').controller('SampleCtrl',function($scope){

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

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


            $scope.show1 = function(e) {
                $scope.popover1.show(e);
            };

             $scope.show2 = function(e) {
                 $scope.popover2.show(e);
             };

        });

    </script>
</head>
<body>
    <ons-navigator var="myNavigator" page="page1.html"></ons-navigator> 
</body>
</html>

page1.html

<ons-page ng-controller="SampleCtrl">
    <ons-toolbar>
        <div class="center">テスト</div>
    </ons-toolbar>

    <ons-button id="button1" ng-click="show1('#button1');" modifier="large" style="margin: 100 auto;">
            ポップオーバー1
    </ons-button>

    <ons-button  id="button2" ng-click="show2('#button2');" modifier="large" style="margin: 0 auto;margin-top: 10px;">
            ポップオーバー2
    </ons-button>

    <ons-template id="popover1.html">
        <ons-popover id="pop1" var="popover1" direction="up down" cancelable style="width: 90%;height:300px;">
            <ons-page style="background-color: yellow"></ons-page>
        </ons-popover>
    </ons-template>

    <ons-template id="popover2.html">
        <ons-popover id="pop2" var="popover2" direction="up down" cancelable style="width: 90%;height:300px;">
            <ons-page style="background-color: red"></ons-page>
        </ons-popover>
    </ons-template>

</ons-page>

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。