###前提・実現したいこと
Monaca クラウド IDEで
「Onsen UI V2 Angular 1 Splitter」のテンプレートをベースにアプリを作成しています。
アプリ起動時最初にログインダイアログを表示しようとしているのですが
ダイアログの起動がデバッカー(Android)だととても不安定です。(プレビューでは問題なく出ます)
ダイアログが出なくなる時はshow()メソッド付近でUnhandled promise rejectionが起きます。
###発生している問題・エラーメッセージ
www/lib/onsenui/js/angular-onsenui.min.js:8 304SH Onsen UI require jqLite. Load jQuery after loading AngularJS to fix this error. jQuery may break Onsen UI behavior. www/js/main.js:5 304SH Onsen UI is ready! www/js/main.js:7 304SH createDialog www/js/main.js:9 304SH createDialog_end www/components/loader.js:23279 304SH Unhandled promise rejection
###該当のソースコード
index.html
<!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 src="js/main.js"></script> </head> <body> <ons-template id="login.html"> <ons-dialog var="LoginDialog" ng-controller="loginController"> <div class="main-dialog"> <p><ons-input type="text" placeholder="アカウント" id="username"></ons-input></p> <p><ons-input type="password" placeholder="パスワード" id="password"></ons-input></p> <p><ons-button modifier="large" ng-click="clickLogin()">ログイン</ons-button></p> <div id="errMessageDialog" style="color:red">エラー</div> </div> </ons-dialog> </ons-template> <ons-splitter ng-controller="AppController as app" var="splitter"> <ons-splitter-side side="left" width="220px" collapse swipeable> <ons-page> <ons-list> <ons-list-item ng-click="app.load('home.html')" tappable> Home </ons-list-item> <ons-list-item ng-click="app.load('settings.html')" tappable> Settings </ons-list-item> <ons-list-item ng-click="app.load('about.html')" tappable> About </ons-list-item> </ons-list> </ons-page> </ons-splitter-side> <ons-splitter-content page="home.html"></ons-splitter-content> </ons-splitter> <ons-template id="home.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="app.toggle()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Main </div> </ons-toolbar> <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p> </ons-page> </ons-template> <ons-template id="settings.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="app.toggle()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Settings </div> </ons-toolbar> </ons-page> </ons-template> <ons-template id="about.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="app.toggle()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> About </div> </ons-toolbar> </ons-page> </ons-template> </body> </html>
main.js
var module = ons.bootstrap(); ons.ready(function() { console.log("Onsen UI is ready!"); ons.createDialog('login.html').then(function(dlg){ console.log("createDialog"); LoginDialog.show(); console.log("createDialog_end"); }); }); module.controller('loginController', function($scope) { alert("loginController"); $scope.clickLogin = function(){ alert("click"); LoginDialog.hide(); splitter.content.load('home.html'); }; }); module.controller('AppController', function($scope) { this.load = function(page) { $scope.splitter.content.load(page); $scope.splitter.left.close(); }; this.toggle = function() { $scope.splitter.left.toggle(); }; });
###試したこと
.show()メソッドでcatchしてみました。
LoginDialog.show().then(function(a){console.log("ok:" + a)}).catch(function(err){console.log("err:" + err)});
ログ
www/js/main.js:5 304SH Onsen UI is ready! www/js/main.js:7 304SH createDialog www/js/main.js:9 304SH createDialog_end www/js/main.js:8 304SH err:TypeError: Cannot read property 'style' of null
なぜこのようなエラーがでるのか見当もつきません。
仕方なくダイアログを使わない方向で進めてますが
できれば解決したいです。
よろしくお願いいたします。
###補足情報(言語/FW/ツール等のバージョンなど)
iOSのほうでは特に問題ありませんでした。
Androidバージョンは4.4.2です。(ちょっと古いです・・・)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/05/12 05:21