angularjs – 在onsen UI中使用多个html文件

前端之家收集整理的这篇文章主要介绍了angularjs – 在onsen UI中使用多个html文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我只是发现了温泉,我真的很喜欢它的设计和感觉.

我有一个问题,但是:

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文件内容正确显示.

这是一个bug吗?有解决方法吗?我尝试在ons.ready()事件上将页面加载到$templateCache中.他们已成功加载,但再次不显示,直到第二次点击…

如果一个很棒的框架不会将项目分割成多个文件,那将是一个耻辱.

删除< ons-template>标签.只有在index.html中定义模板时,才需要这样做.

猜你在找的Angularjs相关文章