###前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/06 05:12
2017/01/06 06:42 編集
2017/01/10 02:19