ons-sliding-menuのmain-pageでons-modalを使いたい

###前提・実現したいこと
onsen UI ver.2（v2.0.3）をMonacaで利用しています。

###発生している問題・エラーメッセージ
ons-sliding-menu の main-page で ons-modal のHTMLを記述するとエラーになってしまいます。
解決方法がありましたらご教示いただけないでしょうか。

<ons-modal id="modal" style="display: none; z-index: 10001;" class="modal">
Error: undefined is not an object (evaluating 'element[0]._animatorFactory.setAnimationOptions')

###該当のソースコード

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">
  <script>
    ons.bootstrap()
  </script>
  </head>
  <body>
	<ons-sliding-menu var="app.menu" main-page="page.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left"> </ons-sliding-menu>
	
	<ons-template id="page.html">
		<ons-page>
			<ons-modal id="modal">
			  Modal content
			</ons-modal>
			<p style="text-align: center">
				<ons-button ng-click="app.menu.toggleMenu()">Toggle</ons-button>
			</p>
		</ons-page>
	</ons-template>
	
	<ons-template id="menu.html">
		<ons-page> 
			<!-- menu page's contents --> 
		</ons-page>
	</ons-template>
	
  </body>
</html>

###試したこと
ons-modal を ons-sliding-menu と同列するとエラーになりませんが、
出来ることなら ons-page内にons-modalを置きたいです。

<body>
    <ons-modal id="modal">
	  Modal content
	</ons-modal>
	
	<ons-sliding-menu var="app.menu" main-page="page.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left"> </ons-sliding-menu>
	
	<ons-template id="page.html">
		<ons-page>
			<p style="text-align: center">
				<ons-button ng-click="app.menu.toggleMenu()">Toggle</ons-button>
			</p>
		</ons-page>
	</ons-template>
	
	<ons-template id="menu.html">
		<ons-page> 
			<!-- menu page's contents --> 
		</ons-page>
	</ons-template>
	
  </body>

行動規範の内容に同意します

回答1件

ベストアンサー

ソースをほぼそのまま貼り付けましたが、エラー無く動いているようです。
（monacaはプレビューで動作確認しました）

動作確認用リンク

html
1<html>
2  <head>
3  <meta charset="utf-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
6
7  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
8  <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.3/js/onsenui.min.js"></script>
9  <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.3/js/angular-onsenui.min.js"></script>
10
11  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.3/css/onsenui.min.css">
12  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.3/css/onsen-css-components.min.css">
13
14  <script>
15    ons.bootstrap();
16  </script>
17  </head>
18  <body>
19    <ons-sliding-menu var="app.menu" main-page="page.html" menu-page="menu.html" max-slide-distance="200px" type="reveal" side="left"> </ons-sliding-menu>
20
21    <ons-template id="page.html">
22        <ons-page>
23            <ons-modal id="modal" var="modal">
24              Modal content
25            </ons-modal>
26            <p style="text-align: center">
27                <ons-button ng-click="app.menu.toggleMenu()">Toggle</ons-button>
28                <ons-button ng-click="modal.show()">modal</ons-button>
29                
30            </p>
31        </ons-page>
32    </ons-template>
33
34    <ons-template id="menu.html">
35        <ons-page> 
36            <!-- menu page's contents --> 
37        </ons-page>
38    </ons-template>
39
40  </body>
41</html>

投稿2017/01/06 04:04

編集2017/01/06 04:05

pinpikokun

総合スコア376

hiroki0322

2017/01/06 05:12

ご回答ありがとうございます！再度確認したところ、PCのプレビューでは正しく動作しておりました。しかし、iPhoneのSafariやMonacaデバッガーではons-modalが未だ表示されません。 onsen UIの不具合なのでしょうか、、？

pinpikokun

2017/01/06 06:42 編集

確かに実機で確認すると動きませんね。。。 https://pinpikokun.github.io/index6.html onsen-uiのissueを確認したところ似たような現象が上がっていますが情報不足の為closeされていました。 issueに再現方法を記入して回答を待つのが良いと思います。（日本語で書きこんでも対応してくれるはずです） https://github.com/OnsenUI/OnsenUI/issues/1604

hiroki0322

2017/01/10 02:19

ご回答ありがとうございます！自力では解決できなそうなので、issueを追加して回答待とうと思います。

行動規範の内容に同意します