1

index.htmlからタップによってpage1.html(別ファイル)にnavigator.pushPage()で遷移した場合
pgae1.htmlにはons-templateを記述は可能なのでしょうか?

使い方が正しいか分かりませんが、page1.htmlにons-page(初期表示される)を記述して、それとは別にons-templateを使いたい感じです。
このように別ファイル化した場合、ons-templateではなく、同じく別ファイル化しないとダメなのでしょうか?

1 件の回答 1

1

複数のhtmlファイルとons-templateを併用するとうまく動かない

こちらの質問に回答がありますが、別ファイルのons-templateを使用するには事前にng-includeしておく必要があるようです。

<ng-include src="'page1.html'"></ng-include>

ただ、今回のようにindex.htmlons-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 の方がお手軽な気はします。

  • C の待ち時間を調整する
  • 準備ができたら呼ばれるイベントを探す

等で「たまに動かない」は解消できるかもしれません。

1
  • お礼が遅くなり申し訳ありません。 コードまで記載して頂いき大変ありがとうございます。 提示していただいたコードはons-navigatorのpage属性なので ボタンを押した時のpushPageでも同じような挙動なのか試してみたいと思います。
    – Ida Isamu
    Commented 2015年7月24日 6:24

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。