9393


monacaクラウドでOnsenUI/AngularJSを使いアプリ制作の勉強中です。

複数の画面があるアプリで、基本的にはhtmlは1ファイルにまとめたいのですが  
リリースに含まれるページとデバッグ目的ページなどは分離したいので  
2つのhtmlファイルに分けたところ、変な動きをします。

  1. case A  
最初はdebug.htmlが正しく表示されず、またpageA、pageC(奇数目のページ)が表示されません。

  2. case B  
debug.htmlは最初から正しく表示されますが、pageB、pageDが表示されません。  
なお最初のコメントだけの行を削除するとエラー「Error: You can not supply no "ons-page" element to
"ons-navigator".」が出ます。

どのように書くのが正しいでしょうか、お分かりの方是非ご教授下さい。

  * modules/angular.js

[code]

    // This is a JavaScript file
    var app = angular.module('myApp', ['onsen']);
    
    var svc = function($rootScope) {};
    svc.$inject = ['$rootScope'];
    app.service('MainService', svc);
    
    var ctl = function($scope, svc) {};
    ctl.$inject = ['$scope', 'MainService'];
    app.controller('MainController',ctl);
[/code]

  * index.html

[code]

    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <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">
    
        <!-- user -->
        <script type="text/javascript" src="modules/angular.js"></script>
        <!-- user -->
    
    </head>
    
    <body>
    
    <ons-template id="navigator.html">
        <ons-navigator var="nav" page="home.html"></ons-navigator>
    </ons-template>
    
    <ons-tabbar var="tabbar">
        <ons-tab
            icon="home"
            label="home"
            page="navigator.html"
            visible="true"
            active="true"></ons-tab>
        <ons-tab
            icon="bolt"
            label="debug"
            ng-click="nav.pushPage('debug.html')"
            visible="true"></ons-tab>
    </ons-tabbar>
    
    <ons-template id="home.html">
    <ons-page id="home" ng-controller="MainController">
        <div>home</div>
    </ons-page>
    </ons-template>
    
    </body>
    </html>
[/code]

  * debug.html(case A)

[code]

    <ons-template id="debug.html">
    <ons-page id="debug" ng-controller="MainController">
    
        <ons-list>
            <ons-list-item ng-click="nav.pushPage('pageA.html');">
                PageA
      </ons-list-item>
            <ons-list-item ng-click="nav.pushPage('pageB.html');">
                PageB
      </ons-list-item>
            <ons-list-item ng-click="nav.pushPage('pageC.html');">
                PageC
      </ons-list-item>
            <ons-list-item ng-click="nav.pushPage('pageD.html');">
                PageD
      </ons-list-item>
     </ons-list>
    
    </ons-page>
    </ons-template>
    
    <ons-template id="pageA.html">
    <ons-page id="pageA" ng-controller="MainController">
        <div>A</div>
    </ons-page>
    </ons-template>
    
    <ons-template id="pageB.html">
    <ons-page id="pageB" ng-controller="MainController">
        <div>B</div>
    </ons-page>
    </ons-template>
    
    <ons-template id="pageC.html">
    <ons-page id="pageC" ng-controller="MainController">
        <div>C</div>
    </ons-page>
    </ons-template>
    
    <ons-template id="pageD.html">
    <ons-page id="pageD" ng-controller="MainController">
        <div>D</div>
    </ons-page>
    </ons-template>
[/code]

  * debug.html(case B)

[code]

    <!-- -->
    <ons-page id="debug" ng-controller="MainController">
    
        <ons-list>
            <ons-list-item ng-click="nav.pushPage('pageA.html');">
                PageA
      </ons-list-item>
            <ons-list-item ng-click="nav.pushPage('pageB.html');">
                PageB
      </ons-list-item>
            <ons-list-item ng-click="nav.pushPage('pageC.html');">
                PageC
      </ons-list-item>
            <ons-list-item ng-click="nav.pushPage('pageD.html');">
                PageD
      </ons-list-item>
     </ons-list>
    
    </ons-page>
    
    <ons-template id="pageA.html">
    <ons-page id="pageA" ng-controller="MainController">
        <div>A</div>
    </ons-page>
    </ons-template>
    
    <ons-template id="pageB.html">
    <ons-page id="pageB" ng-controller="MainController">
        <div>B</div>
    </ons-page>
    </ons-template>
    
    <ons-template id="pageC.html">
    <ons-page id="pageC" ng-controller="MainController">
        <div>C</div>
    </ons-page>
    </ons-template>
    
    <ons-template id="pageD.html">
    <ons-page id="pageD" ng-controller="MainController">
        <div>D</div>
    </ons-page>
    </ons-template>
[/code]


CC BY-SA 3.0
2015-04-21T06:54:05.387
9368
2015-04-21T13:32:46.120
9031
question
onsen-ui
複数のhtmlファイルとons-templateを併用するとうまく動かない


page属性や`pushPage()`の引数に外部ファイルを指定すると、そのページ全体を`<ons-
page>`として読み込もうとするみたいです。今回の場合、テンプレ集を読み込みたいだけなので、`<body>`タグの下に以下の1行を加えると(case
A)でうまく動くと思います。

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

編集前の`pushPage('debug.html')`は外部ファイルの`debug.html`全体を指しており、編集後の`pushPage('debug.html')`は`<ons-
template
id='debug.html'>`を指しているというわけです。外部ファイルの名前とテンプレートのid属性の値が同じ場合は、テンプレートが優先されるようです。


CC BY-SA 3.0
2015-04-21T13:26:20.710
9393
2015-04-21T13:32:46.120
2015-04-21T13:32:46.120
8532
8532
9368
answer