push-pageの使い方が分からない

###前提・実現したいこと
MonacaでOnsenui v2を用いてアプリ開発をしていて、<ons-button>の中にpush-pageを記述して画面遷移をしたいのですが、ボタンを押しても反応しません。
onclick=pushPage(pageUrl, [options])で画面遷移をする方法を教えていただけると嬉しいです。

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

<!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/onsenui/js/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">
</head>
<body>
    <ons-navigator id="navigator" page="page1.html"></ons-navigator>
  
    <ons-template id="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>
    </ons-template>
    
    <ons-template id="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>
    </ons-template>
</body>
</html>

###試したこと
MonacaのテンプレートではJSを使って画面遷移をしていたのですが、遷移アニメーションの変更方法が分からないのと、記述量が増加するためソースが理解しにくくなりそうだったので使わない方針にしました。

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

回答2件

ベストアンサー

確認したところ、
myNavigator.
を
document.querySelector('#navigator').
にしたら動きました。

きっと
https://ja.onsen.io/v2/docs/guide/js/#-
要素を理解する
のところの
var myNavigator = document.querySelector("#my-navigator"); // または、getElementById("my-navigator") も使用できます。
の部分を十分に理解せずに移植したのではと思います。

投稿2017/04/24 08:01