離子控制頁面

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文件中的所有導航啓動所在的這個通用模板。