离子控制页

Question

我正在尝试将我的应用程序的 3 个页面内容放在一个 .html 文件中，但我无法做到这一点。我的 .html 页面代码在这里：

<script id="templates/topList.html" type="text/ng-template">
      <ion-view>
        <ion-content class="padding">
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
          </p>
        </ion-content>
      </ion-view>

  </script>

  <script id="templates/topList2.html" type="text/ng-template">
      <ion-view>
        <ion-content class="padding">
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
          </p>
        </ion-content>
      </ion-view>

  </script>

我的 app.js 是这样的：

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('home', {
     url: '/',
     templateUrl: 'templates/home.html'
    })
    .state('registration', {
     url: '/registration',
     templateUrl: 'templates/registration.html',
     controller: 'RegistrationCtrl'
    })
    .state('code_entery_page', {
     url: '/code_entery_page',
     templateUrl: 'templates/code_entery_page.html',
     controller: 'code_entery_pageCtrl'
    })
    .state('registration-create-profile', {
     url: '/registration-create-profile',
     templateUrl: 'templates/registration-create-profile.html',
     controller: 'registration-create-profileCtrl'
    })
    .state('app.main-traveler-page', {
     url: '/main-traveler-page',
     templateUrl: 'templates/main-traveler-page.html',
     controller: 'main-traveler-pageCtrl'
    })

    .state('pinko.main-pinko-page', {
     url: '/main-pinko-page',
     templateUrl: 'templates/main-pinko-page.html',
     controller: 'main-pinko-pageCtrl'
    })



   .state('app', {
     url: '/app',
     abstract: true,
     templateUrl: 'templates/directives/traveler-navigation.html',
     controller: 'AppCtrl'
    })

    .state('pinko', {
     url: '/pinko',
     abstract: true,
     templateUrl: 'templates/directives/pinko-navigation.html',
     controller: 'AppCtrl'
    })




  $urlRouterProvider.otherwise('/');
});

但我不知道如何在我的页面打开时连接到 app.js 中的 toplist.html 和 toplist2.html 来工作？在 app.js - .state('pinko.main-pinko-page') 是我要显示 toplist.html 和 toplist2.html

的页面

Answer 1

将您的两个模板添加到单个 html 文件中，例如 common-template.html.

并在 main-pinko-page.html 中包含此通用模板，正如您在问题中提到的那样，在 .state('pinko.main-pinko-page').

中需要

如果仅在一个地方需要此模板，请使用上述情况，否则将此公共模板包含在所有导航启动的主 html 文件中。

离子控制页

Ionic Control Pages

angularjs

ionic-framework

ionic-view