Onsen UIでページナビゲーションの中で複数のポップオーバーを使う
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>