离子控制页面

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('/'); 
}); 

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

Answer 1

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

并且在您的问题中提及的.state（'pinko.main-pinko-page'）中需要提及的main-pinko-page.html中包含此通用模板。

如果这个只需要在一个地方使用上面的情况，否则包括在您的主html文件中的所有导航启动所在的这个通用模板。