index.htmlからタップによってpage1.html(別ファイル)にnavigator.pushPage()で遷移した場合
pgae1.htmlにはons-templateを記述は可能なのでしょうか?
使い方が正しいか分かりませんが、page1.htmlにons-page(初期表示される)を記述して、それとは別にons-templateを使いたい感じです。
このように別ファイル化した場合、ons-templateではなく、同じく別ファイル化しないとダメなのでしょうか?
複数のhtmlファイルとons-templateを併用するとうまく動かない
こちらの質問に回答がありますが、別ファイルのons-template
を使用するには事前にng-include
しておく必要があるようです。
<ng-include src="'page1.html'"></ng-include>
ただ、今回のようにindex.html
のons-navigator
に設定する場合はこれだけだとうまく動かないようです(おそらくpage1.html
の読み込みが終わらない。やり方がまずいだけかもしれませんが・・・)。
page1.html ※これは下記A, B, Cで共通
<ons-template id="sub-page1">
<ons-page>
<ons-toolbar>
<div class="center">Sub Page 1</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Sub Page 1</h1>
<ons-button onclick="navi.pushPage('sub-page2')">
Push Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="sub-page2">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Sub Page 2</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Sub Page 2</h1>
<ons-button onclick="navi.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
index.html
A. これはうまく動かない
<!DOCTYPE HTML>
<html>
<head>
~ 中略 ~
<script>
ons.bootstrap();
</script>
</head>
<body>
<ng-include src="'page1.html'"></ng-include>
<ons-navigator var="navi" page="sub-page1">
</ons-navigator>
</body>
</html>
B. これはうまく動いた(と思う)※たまに動かない
<!DOCTYPE HTML>
<html>
<head>
~ 中略 ~
<script>
ons.bootstrap();
ons.ready(function() {
// page1.html内のページを設定
navi.resetToPage('sub-page1');
});
</script>
</head>
<body>
<ng-include src="'page1.html'"></ng-include>
// とりあえずダミーを設定
<ons-navigator var="navi" page="dummy">
</ons-navigator>
<ons-template id="dummy">
// ダミーページ
</ons-template>
</body>
</html>
C. これが一番成功率が高い気がする ※たまに動かない
<!DOCTYPE HTML>
<html>
<head>
~ 中略 ~
<script>
ons.bootstrap();
ons.ready(function() {
// 500ミリ秒待ってからpage1.html内のページを設定
setTimeout(function() {
navi.resetToPage('sub-page1');
}, 500);
});
</script>
</head>
<body>
<ng-include src="'page1.html'"></ng-include>
<ons-navigator var="navi">
</ons-navigator>
</body>
</html>
せっかく試したので B も記載していますが、C の方がお手軽な気はします。
等で「たまに動かない」は解消できるかもしれません。