Q&A
「navigator」というキーワードをMainページで用いていませんか？それが見つからないというエラーです。navigatorの定義箇所と使用箇所を記載して下さい。
pushpageは問題なくできるのですが、popPageしたら以下のエラーが出ます
Uncaught TypeError: Cannot read property 'navigator' of undefined
構造は以下のようなものでして（meta等は割愛）
//index.html <!DOCTYPE HTML> <html ng-app="myApp"> <script>function Func1(){pages.pushPage(Main.html);}</script> <script>function Func2(){pages.popPage();} </script> <body> <ons-navigator page="./Login.html" var ="pages"></ons-navigator> </body>
まずons-navigatorを使ってログインページに移動しています。
ログインページではFunc1を使ってMainページに移動します。（ここはエラーなし）
そしてMainページでFunc2を使ってログインページに戻ります。（ここで上記エラー）
スクリプトの定義位置などを色々ためしてみてはいるのですが、ずっとこの状態です。
<!DOCTYPE HTML> <html ng-app="myApp"> <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'"> <head> <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> <script src="https://cdn.socket.io/socket.io-1.3.5.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="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script> document.addEventListener("backbutton", function(){ console.log("Back");pages.popPage();}, false); var app = ons.bootstrap('myApp', []); app.controller('DialogController', function($scope) { $scope.dialogs = {}; $scope.show = function(dlg) { if (!$scope.dialogs[dlg]) { ons.createDialog(dlg).then(function(dialog) { $scope.dialogs[dlg] = dialog; dialog.show(); }); } else { $scope.dialogs[dlg].show(); } } }); app.controller('beancrecre',function($scope){ $scope.Funcz=function(){ Func(); }; $scope.pop=function(url){ pages.popPage(); }; }); </script> <script src="serv/A.js"></script> <script src="serv/B.js"></script> </head> <body> <ons-navigator page="./login.html" var ="pages"></ons-navigator> </body> </html>
login.html
<ng-include src="'login.html'"></ng-include> <ons-template id="login.html" > <ons-page > <ons-toolbar style="background-color:#009688;"> <div class="center">My App</div> </ons-toolbar> <ons-tabbar position="bottom" > <ons-tab page="ranking.html" label="A" icon="ion-lightbulb" style="background-color:#009688;" active></ons-tab> <ons-tab page="create.html" label="B" icon="ion-plus-round" style="background-color:#009688;"></ons-tab> <ons-tab page="star.html" label="C" icon="ion-android-star" style="background-color:#009688;"></ons-tab> <ons-tab page="home.html" label="D" icon="ion-ios-home" style="background-color:#009688;"></ons-tab> </ons-tabbar> </ons-page> </ons-template>
navigatorの記述を探しましたがons-navigator以外にそれらしいものが見当たりません。
ではOnsenUI内部のエラーかもしれませんね。pinpikokunさんご回答の通り、通常は動作するはずですが、動作していないということは何か通常でないことをしようとしているはずです。再現するコードを提示頂ければ事象を確認します。
回答2件
0
自己解決
MonacaのjQuery (Monaca Version) バージョン:2.0.3が邪魔をしていたらしく。
新しくjQueryをダウンロードし<script src="components/jQuery/dist/jquery.js"></script>
等でcomponents/loader.jsとは別に導入をしたらうまくいきました。
投稿2017/05/12 04:17
総合スコア422
0
seriさんのコードを用いた場合このようになると思います
javascript
1<html> 2<head> 3 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/js/onsenui.js"></script> 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/js/angular-onsenui.js"></script> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsenui.min.css"> 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.2.6/css/onsen-css-components.min.css"> 8 9 <script>ons.bootstrap();</script> 10 <script>function Func1(){pages.pushPage('Main.html');}</script> 11 <script>function Func2(){pages.popPage();}</script> 12</head> 13<body> 14 <ons-navigator page="./Login.html" var ="pages"></ons-navigator> 15</body> 16</html>
html
1<div> 2 <div>ログイン画面です</div> 3 <ons-button onClick="Func1()">ログイン</ons-button> 4</div>
html
1<div> 2 <div>メインページです。</div> 3 <ons-button onClick="Func2()">戻る</ons-button> 4</div>
投稿2017/05/11 01:22
総合スコア376
回答ありがとうございます、
ons.bootstrapを追加したいのですが、質問文にのせていない
var app = angular.module('myApp', ['onsen']);
がぶつかってしまっているようです、AngularJsも使っており、エラーとは無関係かと記載していませんでした
エラーの対策を色々としていますが今度はbootstrapでの定義がうまくいきません。。
var app = angular.module('myApp', ['onsen']);
app.controller('DialogController', function($scope) {
$scope.dialogs = {};
$scope.show = function(dlg) {
if (!$scope.dialog......
のようなものなのですが、ons.bootstrap();を挟もうとしても、angular.bootstrapをしようとしても動作しません、お力を貸してください。
私の作成したサンプルではangularjsのモジュールを読み込んでいるので、`ons.bootstrap()`だけでangularjsの構文も利用可能です。
今回であれば
`var app = angular.module('myApp', ['onsen']);`を
`var app = ons.bootstrap('myApp', []);`に書き換えてください。
サンプルURL : http://plnkr.co/edit/9FQou20DcJ3m5D5PBqOM?p=preview
onsen-uiとangularjsのバージョンをお願いします
onsenui - v2.0.3
AngularJS v1.5.8
となります
ちなみに、エラーの出ている箇所はangular.min.jsファイルです
htmlタグのng-appをはずすことで
ons.bootstrap('myApp', []);
でエラーは出なくなりましたが
Uncaught TypeError: Cannot read property 'navigator' of undefined
とゆうエラーは相変わらず出てきています。
あなたの回答
tips
プレビュー
