

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

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

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

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

index.html

[code]

    <!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>
    
[/code]

page1.html

[code]

    <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>
    
[/code]


CC BY-SA 3.0
2015-03-06T02:59:35.873
7519
2015-03-06T05:25:02.713
2015-03-06T05:25:02.713
3516
7234
question
onsen-ui
Onsen UIでページナビゲーションの中で複数のポップオーバーを使う