angularjs - 如何在onsenui中使用多个html文件-6ren

angularjs - 如何在onsenui中使用多个html文件

转载作者：行者123 更新时间：2023-12-02 23:58:22

在 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' } );">Pay</ons-button>
    </ons-navigator>
  </body>
</html>

服务.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>

脚本.js

angular.module('app', ['onsen']);

    angular.module('app')
      .controller('AppController', function($scope) {
        ons.ready(function() {
          ons.bootstrap();
        });
      });

如果我使用单个 html 文件，这似乎是一个性能问题。在这里，如果我单击按钮，它不会推送到 services.html 页面。如果我在同一个 html 文件中使用ons-template，这将起作用。我如何在这里使用多个 html 页面。

这是我尝试过的..

PLUNKER

最佳答案

<ons-template>仅需要在 index.html 内，而不是在单独的文件中。删除<ons-template id="services.html">和</ons-template>来自您的services.html它应该有效。 “id”将是文件的名称。

关于angularjs - 如何在onsenui中使用多个html文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28847709/