在離子框架上創建離子選項卡外的視圖

我是新來的離子，但它已經很長時間了，因爲我想嘗試它。我只是在玩耍，所以也許我沒有得到完整的概念。在離子框架上創建離子選項卡外的視圖

我正在嘗試做一個簡單的應用程序，底部有三個標籤和一個設置圖標，這三個標籤將在那裏出現。當你點擊該圖標時，應該隱藏並顯示設置屏幕。

由於我不希望用戶丟失任何內容，所有的觀點從一個全球性繼承：

angular.module('app', ['ionic', 'debug']).config(function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
     .state('app', { 
     url: "/app", 
     abstract: true, 
     controller: 'AppController', 
     templateUrl: "ui/modules/tabs/view.html" 
     }) 
     .state('app.compose-text', { 
     url: '/text', 
     views: { 
      'compose-text': { 
      templateUrl: 'ui/modules/text-composer/view.html' 
      } 
     } 
     }) 
     .state('app.compose-draw', { 
     url: '/draw', 
     views: { 
      'compose-draw': { 
      templateUrl: 'ui/modules/draw-composer/view.html' 
      } 
     } 
     }) 
     .state('app.compose-photo', { 
     url: '/photo', 
     views: { 
      'compose-photo': { 
      templateUrl: 'ui/modules/photo-composer/view.html' 
      } 
     } 
     }) 
     .state('app.settings', { 
     url: '/settings', 
     views: { 
      'settings': { 
      controller: 'ui/modules/settings/ctrl.js', 
      templateUrl: 'ui/modules/settings/view.html' 
      } 
     } 
     }); 

    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/app/text'); 
}); 

angular.module('app').run(function($rootScope) { 
});

然後，tabs/view看起來是這樣的：

<ion-nav-view name="settings"></ion-nav-view> 

<ion-tabs class="tabs-assertive tabs-icon-only"> 
    <ion-tab title="Text" icon="icon ion-ios7-compose-outline" href="#/app/text"> 
    <ion-nav-view name="compose-text"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Draw" icon="icon ion-edit" href="#/app/draw"> 
    <ion-nav-view name="compose-draw"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Photo" icon="icon ion-ios7-camera-outline" href="#/app/photo"> 
    <ion-nav-view name="compose-photo"></ion-nav-view> 
    </ion-tab> 
</ion-tabs>

和一個意見：

<ion-view title="Example" class="slide-left-right"> 
    <ion-nav-buttons side="left"> 
    <a class="button button-icon button-clear ion-ios7-gear-outline" href="#/app/settings"></a> 
    </ion-nav-buttons> 
    <ion-content padding="true"> 
    <h1>Text</h1> 
    </ion-content> 
</ion-view>

我想知道的第一件事是：有什麼辦法可以重用這些按鈕是否有所有觀點？似乎沒有用，一直以來都在不斷地定義它們。

但這不是真正的事情。當我點擊設置時，某些東西會被注入到ion-nav-view，但它包含很多東西（不在模板中），並且它不會隱藏其他視圖或標籤。

一些截圖：

http://forum.ionicframework.com/uploads/default/_optimized/410/778/37f711d3f9_312x500.png

應該是什麼這是正確的做法？

來源

2014-03-27 Antonio Laguna

這是我第一次在這裏回答一個問題，所以請耐心等待。

導航到一個視圖，而不在標籤欄： 取下設置狀態下的「應用程序」的前綴，因此它不再是一個孩子家長抽象狀態（應用程序）。

.state('settings', { 
     url: '/settings', 
     views: { 
      'settings': { 
      controller: 'ui/modules/settings/ctrl.js', 
      templateUrl: 'ui/modules/settings/view.html' 
      } 
     } 
     });

**如果您在此之後添加任何狀態，請務必刪除分號，而分號表示結束。

這是一個邦德解決方案。
您的問題的完整解決方案是從一個離子項目模板開始。幸運的是，他們有一個標籤選項，這是一個全局標籤欄。

命令行： ionic start appName tabs

這應該給你一切你需要一個適當的起始模板。它還具有樣本controllers.js，services.js和app.js文件，因此您可以從此處進行構建。它還將幫助您正確構建項目，以防止意外的數據被注入到您的標記中。

源1：http://ionicframework.com/getting-started/
源2：http://ionicframework.com/docs/api/directive/ionNavView/

**獎勵：還有一個在源2中的絕招，告訴您如何讓您的index.html文件中的所有模板，以加快應用程序並簡化您的工作流程。

Goodluck。

來源

2014-07-23 00:20:53

在離子框架上創建離子選項卡外的視圖

回答

相關問題