myNavigator is not definedというエラーについて

初心者です。エラーが出て解決できないので、ご教授いただきたいです。
monaca/onsenUIの教本を使って勉強しており、サンプルコード通りにコーディングしているのですが、
以下のエラーが出てしまいます。

Uncaught ReferenceError: myNavigator is not defined
at HTMLElement.onclick (index.html:1)

ons-navigatorコンポーネントを使っているのですが、画面がうまく遷移せず、
検証を見てみるとmyNavigatorが定義されていないと出てしまいます。
なんか初歩的なミスのような気がするのですが、エラーの原因が分かる方がいらっしゃれば
教えていただければ幸いです。

よろしくお願いいたします。以下コードです。

・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"> <script src="components/loader.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.bootstrap(); ons.disableAutoStatusBarFill(); // (Monaca enables StatusBar plugin by default) </script> </head> <body> <ons-navigator var="myNavigator" page="page1.html"> </ons-navigator> </body> </html>

page1.html
<ons-page>
<ons-toolbar>
<div class="center">Navigator</div>
</ons-toolbar>

<div style="text-align: center">
    <br>
    <ons-button
        onclick="myNavigator.pushPage('page2.html')">
        Push Page 2
    </ons-button>
</div>

</ons-page>

page2.html
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>

<div style="text-align: center">

    <h1>Page 2</h1>
    <ons-button
        onclick="myNavigator.popPage()">
      Pop Page
    </ons-button>

</div>

</ons-page>

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

回答2件

ベストアンサー

OnsenUI は OnsenUI V2 に移行する際にAngularJSへの依存性をなくしてるため、<ons-navigator>の var 属性は削除されています。
var属性を使うにはテンプレートでAngularJSを選ぶ必要があります。
もし、AngularJSを使わないのであれば、id属性を指定してやるとやりやすいと思います。
OnsenUI V2 の[新規プロジェクトの作成]から[Onsen UI V2 JS Navigation]で作成されるものが参考になるかと思います。

投稿2017/04/07 12:22

larkpia

総合スコア138

kozy

2017/04/07 12:42

var属性でなく、id属性にしたら問題なく画面遷移しました！大変助かりました、ありがとうございます！

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

おそらく参考にされているのは、過去のOnsenUIの指南書です。
過去のOnsenUIから、現在のOnsenUIはいろいろと変わっています。
調べてみたところOnsenUIの初期化が上手くできていませんでした。

新規プロジェクトの作成からOnsenUI V2 Angular1 Minumumを選択し、以下のコードを貼り付けて試してみて下さい。
一応、やりたかったことはできると思います。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7  <script src="components/loader.js"></script>
8  <script src="lib/angular/angular.min.js"></script>
9  <script src="lib/onsenui/js/onsenui.min.js"></script>
10  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
11
12  <link rel="stylesheet" href="components/loader.css">
13  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
14  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
15  <link rel="stylesheet" href="css/style.css">
16
17  <script>
18ons.bootstrap(); 
19ons.disableAutoStatusBarFill();  // (Monaca enables StatusBar plugin by default) 
20  </script>
21</head>
22<body>
23<ons-navigator var="myNavigator" page="page1.html"> 
24</body>
25</html>
26

HTML
1<ons-page> 
2<ons-toolbar> 
3<div class="center">Navigator</div> 
4</ons-toolbar>
5
6<div style="text-align: center"> 
7<br> 
8<ons-button 
9onclick="myNavigator.pushPage('page2.html')"> 
10Push Page 2 
11</ons-button> 
12</div>
13
14</ons-page>

HTML
1<ons-page> 
2<ons-toolbar> 
3<div class="left"><ons-back-button>Back</ons-back-button></div> 
4<div class="center">Page 2</div> 
5</ons-toolbar>
6
7<div style="text-align: center">
8
9<h1>Page 2</h1> 
10<ons-button 
11onclick="myNavigator.popPage()"> 
12Pop Page 
13</ons-button>
14
15</div> 
16</ons-page>