当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - Using multiple html files in onsen UI

问题描述:

I just discovered onsen ui and I really like the design and the feeling of it.

I have a problem, though:

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

Here it says: "Instead of creating menu.html and content.html in separate files, you can also define the page content in the same page."

I don't like to have my whole app in one html file so I tried to put each template into a separate file. This is my file structure:

www

- index.html

- products.html

- services.html

This is my tabbar:

<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>

EDIT

contents of services.html (products.html is similar):

<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>

END EDIT

Now, when the app loads (Firefox, Chrome, iOS emulator) it will display the tabbar and empty content.

In the console you can see that the external html files have not been loaded yet.

If I click on Services, the browser gets the services.html file, but it is not displayed. I click on Products, the products.html file gets loaded, but not displayed.

Finally: If I click on Services the second time, the contents of the external html file are being displayed correctly.

Is this a bug? Is there a workaround? I tried loading the pages into $templateCache on the ons.ready() event. They were successfully loaded, but again not displayed until the second click...

Would be a shame if a great framework like this would not offer splitting a project into multiple files.

网友答案:

Remove the <ons-template> tag. It's only needed if you define the templates in index.html.

分享给朋友:
您可能感兴趣的文章:
随机阅读: