如何在Onsenui中使用多个HTML文件 [英] How to use multiple html files in onsenui
问题描述
在OnsenUI中，它说:除了在单独的文件中创建index.html和services.html之外，您还可以在同一页面中定义页面内容."
In OnsenUI it says: "Instead of creating index.html and services.html in separate files, you can also define the page content in the same page."
我不希望将整个应用程序放在一个html文件中，因此我尝试将每个模板放入一个单独的文件中.这是我的文件结构:
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
-index.html
-services.html
-services.html
-menu.html
-menu.html
index.html
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsenui.css" />
<link rel="stylesheet" href="http://onsen.io/OnsenUI/build/css/onsen-css-components.css" />
<script src="https://code.angularjs.org/1.2.10/angular.js"></script>
<script src="http://onsen.io/OnsenUI/build/js/onsenui.js"></script>
<script src="script.js"></script>
<script>
angular.module('app', ['onsen']);
angular.module('app')
.controller('AppController', function($scope) {
});
</script>
</head>
<body ng-controller="AppController">
<ons-navigator var="myNavigator">
<ons-button ng-click="myNavigator.pushPage('services.html', { animation : 'slide' } );">Pay</ons-button>
</ons-navigator>
</body>
</html>
services.html
services.html
<ons-template id="services.html">
<ons-page>
<ons-list>
<ons-list-item>Service 1</ons-list-item>
<ons-list-item>Service 2</ons-list-item>
<ons-list-item>Service 3</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
script.js
script.js
angular.module('app', ['onsen']);
angular.module('app')
.controller('AppController', function($scope) {
ons.ready(function() {
ons.bootstrap();
});
});
如果我使用单个html文件，则似乎是性能问题.在这里，如果我单击按钮，它将不会推送到services.html页面.如果我在相同的html文件中使用ons-template，这将起作用.我如何在这里使用多个html页面.
If I use single html file, it seems to be a performance issue. Here, If I click the button, it won't push to the services.html page. This will work if I use ons-template in the same html file. How can I use multiple html pages here.
这是我尝试过的.
推荐答案
<ons-template>仅在index.html内部是必需的，而不是在单独的文件中.从services.html中删除<ons-template id="services.html">和</ons-template>，它应该可以工作. "id"将是文件的名称.
<ons-template> is only necessary inside index.html, not in a separated file. Delete <ons-template id="services.html"> and </ons-template> from your services.html and it should work. The "id" will be the name of the file.
这篇关于如何在Onsenui中使用多个HTML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
