如何在onsenui中使用多个html文件
IT小君
2023-05-12T01:01:25 在OnsenUI中说：“您可以将页面内容定义在同一页面中，而不必在独立文件中创建index.html和services.html。”
我不想把整个应用程序都放在一个html文件中，所以我尝试将每个模板放在单独的文件中。这是我的文件结构：
www
-index.html
-services.html
-menu.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' } );">付款</ons-button>
</ons-navigator>
</body>
</html>
services.html
<ons-template id="services.html">
<ons-page>
<ons-list>
<ons-list-item>服务1</ons-list-item>
<ons-list-item>服务2</ons-list-item>
<ons-list-item>服务3</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
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页面。
这是我尝试的内容..
点击广告，支持我们为你提供更好的服务
评论(1)
<ons-template>只在index.html中需要，不需要在一个单独的文件中。从你的services.html中删除<ons-template id="services.html">和</ons-template>，它就可以工作了。 "id" 将是文件的名称。