angularjs - 在温泉 UI 中使用多个 html 文件

Question

我刚刚发现了 onsen ui，我真的很喜欢它的设计和感觉。

不过我有一个问题:

http://onsen.io/guide/overview.html#DefiningMultiplePagesinSingleHTML

它在这里说:“您还可以在同一页面中定义页面内容，而不是在单独的文件中创建 menu.html 和 content.html。”

我不喜欢将整个应用程序放在一个 html 文件中，因此我尝试将每个模板放入一个单独的文件中。这是我的文件结构:

www
- index.html
- products.html
- services.html

这是我的标签栏:

<ons-tabbar>
  <ons-tabbar-item active="true" page="products.html">
    <div class="tab">
      <ons-icon icon="ion-home" class="tab-icon"></ons-icon>
      <div class="tab-label">Products</div>
    </div>
  </ons-tabbar-item>

  <ons-tabbar-item page="services.html">
    <div class="tab">
      <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon>
      <div class="tab-label">Services</div>
    </div>
  </ons-tabbar-item>
</ons-tabbar>

编辑
services.html 的内容(products.html 类似):

<ons-template id="services.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Services</div>
    </ons-toolbar>

    <ons-list>
      <ons-list-item>Item1</ons-list-item>
      <ons-list-item>Item2</ons-list-item>
      <ons-list-item>Item3</ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

结束编辑

现在，当应用程序加载(Firefox、Chrome、iOS 模拟器)时，它将显示标签栏和空内容。
在控制台中，您可以看到尚未加载外部 html 文件。
如果我单击“服务”，浏览器会获取 services.html 文件，但不会显示。我点击产品，products.html 文件被加载，但没有显示。

最后:如果我第二次单击服务，外部 html 文件的内容将正确显示。

这是一个错误吗？有解决方法吗？我尝试在 ons.ready() 事件中将页面加载到 $templateCache 中。它们已成功加载，但直到第二次单击才再次显示...

如果像这样的伟大框架不提供将项目拆分为多个文件，那将是一种耻辱。

Answer 1

删除 <ons-template>标签。仅当您在 index.html 中定义模板时才需要它.