Question

我正在开发一个带有cordova和onsenui的移动应用程序。我对defining multiple pages in single HTML有疑问。

这是我的HTML：

<ons-page ng-controller="accountController">
<ons-tabbar>
    <ons-tab page="profile.html" label="Profil" icon="ion-person" active="true"></ons-tab>
    <ons-tab page="filters.html" label="Filtres" icon="ion-android-options"></ons-tab>
    <ons-tab page="settings.html" label="Paramètres" icon="ion-gear-a"></ons-tab>
</ons-tabbar>
</ons-page>


<ons-template id="profile.html">
<ons-toolbar>
    <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
    </div>
    <div class="center">Mon profil</div>
    <div class="right">
        <ons-toolbar-button ng-click="saveAccount()">
            <ons-icon icon="ion-android-done" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
    </div>
</ons-toolbar>
<ons-list>
    <ons-list-item>
        <ons-row>
            <ons-col size="30%">
                <img src="res/dev/person.png" style="max-height: inherit; max-width: inherit;" />
            </ons-col>
            <ons-col size="70%">
                <label>{{ data.shortname }}</label>
            </ons-col>
        </ons-row>
    </ons-list-item>
    <ons-list-item>
        <input type="text" ng-model="data.firstname" placeholder="Prénom"
               class="text-input text-input--transparent"
               style="margin-top:8px; width: 100%;"
               autocapitalize="on" autocomplete="on"
               spellcheck="false" autocorrect="off" cb-before="Prénom" />
    </ons-list-item>
    <ons-list-item>
        <input type="text" ng-model="data.lastname" placeholder="Nom de famille"
               class="text-input text-input--transparent"
               style="margin-top:8px; width: 100%;"
               autocapitalize="on" autocomplete="on"
               spellcheck="false" autocorrect="off" cb-before="Nom de famille"/>
    </ons-list-item>
</ons-list>
</ons-template>

<ons-template id="filters.html">
<ons-toolbar>
    <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
    </div>
    <div class="center">Mes filtres</div>
    <div class="right">
        <ons-toolbar-button ng-click="saveAccount()">
            <ons-icon icon="ion-android-done" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
    </div>
</ons-toolbar>
<ons-list>
    <ons-list-item>
        Filtres
    </ons-list-item>
</ons-list>
</ons-template>

<ons-template id="settings.html">
<ons-toolbar>
    <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
    </div>
    <div class="center">Paramètres</div>
    <div class="right">
        <ons-toolbar-button ng-click="saveAccount()">
            <ons-icon icon="ion-android-done" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
    </div>
</ons-toolbar>
<ons-list>
    <ons-list-item>
        Email : {{ data.email }}
    </ons-list-item>

    <ons-list-item>
        <input type="text" ng-model="data.pwd" placeholder="Mot de passe" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
    </ons-list-item>
</ons-list>
</ons-template>

所以这里的目标是有一个标签页，有3个标签。它工作正常，但模板仍显示在页面底部，未呈现：

我发现我可以使用<script type="text/ons-template" id="profile.html">代替<ons-template id="profile.html">，但后来我收到一条错误消息，说它无法找到模板。

我还发现我可以使用<script type="text/ng-template" (...)>。 那是有效的。

另外，我可以在一个单独的文件中定义每个模板，但之后我会有很多文件（它不是我遇到这个问题的唯一文件）。

所以我的问题是：我做错了吗？有没有人有同样的问题，并解决了它？

感谢您的帮助;）

OnsenUI - 一个文件中的多个模板：显示在底部的模板

0 个答案: