在单个 html 中编写多个页面答案

【问题标题】：Write multiple pages in single html在单个 html 中编写多个页面
【发布时间】：2014-05-04 09:25:54
【问题描述】：

我需要在 ionic 框架中实现类似这种 jQuery 结构的东西

<body>
    <div data-role="page" id="page1">
        <!--content -->
    </div>
    <div data-role="page" id="page2">
        <!--content -->
    </div>
</body>

我在谷歌上搜索过，但无法做到。

目前我的 html 中有这个：

<body ng-app="todo" ng-controller="TodoCtrl">
<div id="page1">
    <header id="header" class="bar bar-header">

        <h3 class="title">header 1 is long</h3>
    </header>
    <content padding="true" id="">
    <div class="centered">
        <img alt="Flash Anatomy Muscles" src="images/thinkand.jpg"
            id="cover-img" />

    </div>
    </content>

    <div class="bar bar-footer">
        <div class="title">
            <button id="a" class="button button-light"
                ng-click="showAlert($event)">Origin</button>
            <button id="b" class="button button-light"
                ng-click="showAlert($event)">Insertion</button>
            <button id="c" class="button button-light"
                ng-click="showAlert($event)">Btn3</button>
            <button id="d" class="button button-light"
                ng-click="showAlert($event)">Btn4</button>
        </div>
    </div>
</div>
<div id="page2">
    <header id="header" class="bar bar-header">

        <h3 class="title">header 2</h3>
    </header>

    <content padding="true" id="">
    <div class="centered">
        random text over here
    </div>
    </content>

    <div class="bar bar-footer">
        <div class="title">

            <button id="e" class="button button-light"
                ng-click="showAlert($event)">Btn5</button>
            <button id="f" class="button button-light"
                ng-click="showAlert($event)">Btnn6</button>
        </div>
    </div>
</div>

</body>

它给了我这个结果：

注意这些：

两个页面的标题重叠。
正在显示第 1 页的内容（图像），并且正在将第二页的文本放置在图像上。
第 1 页的页脚与第 2 页的页脚重叠。因此仅显示第 2 页的按钮。

有人可以指导我在 ionic 框架中需要做什么，例如 jquery 的 data-role 属性吗？

P.S：我尝试在 div 中添加 data-role='page'。这根本不会改变结果。

【问题讨论】：

标签： jquery html jquery-ui ionic-framework

【解决方案1】：

Ionic 根本不使用jQuery 的任何内容，它使用Angular JS，我建议您阅读this post。

关于单页结构，恐怕不能用Ionic，因为Ionic实现了ui-router，它为不同的模板创建路由（每个模板是不同的html）。

所以，只要摆脱jQuery 并开始思考Angular，就像帖子所暗示的那样，你不会后悔的！ ;)

【讨论】：