Erstellen von Ansichten außerhalb Ion-Tabs auf Ionic Framework

Question

Ich bin neu in Ionic, aber es ist eine lange Zeit her, seit ich es versuchen wollte. Ich spiele nur herum, vielleicht bekomme ich nicht das volle Konzept.

Ich versuche, eine einfache Anwendung mit drei Registerkarten am unteren Rand und ein Einstellungssymbol, das für alle drei Registerkarten da sein wird. Wenn Sie auf dieses Symbol klicken, sollten sich die Registerkarten verstecken und den Einstellungsbildschirm anzeigen.

Da ich jeden Inhalt verlieren den Anwender nicht wünschen, alle Ansichten erben von einem global:

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) { 
}); 

Dann sieht tabs/view wie folgt aus:

<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> 

Und einer von die Ansichten:

<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> 

Das erste, was ich frage mich, ist: Gibt es eine Möglichkeit, diese Tasten betw wieder zu verwenden Alle Ansichten? Es scheint nutzlos, sie immer und immer wieder zu definieren.

Aber das ist nicht die echte Sache ™. Wenn ich auf Einstellungen klicke, wird etwas in die ion-nav-view injiziert, aber es enthält eine Menge Zeug (was nicht auf der Vorlage ist) und es versteckt auch nicht die andere Ansicht oder die Tabs.

Einige Screenshot:

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

Was der richtige Ansatz für diese sein sollte?

Answer 1

Dies ist das erste Mal, dass ich hier eine Frage beantworte. Bitte tragen Sie mich also.

auf einen Blick, ohne die Tab-Leiste navigieren: den „App“ Präfix aus dem Einstellung Zustand entfernen, so ist es nicht mehr ein Kind zum Vater abstrakten Zustand (app).

** Wenn Sie nach diesem einen Status hinzufügen, müssen Sie das Semikolon löschen, während das Semikolon das Ende angibt.

DAS IST EINE BAND-AID-LÖSUNG.
Die vollständige Lösung für Ihr Problem besteht darin, mit einer ionischen Projektvorlage zu beginnen. Glücklicherweise haben sie eine Tab-Option, die eine globale Tab-Leiste ist.

Befehlszeile: ionic start appName tabs

dass Sie eine richtige Ausgangsvorlage mit allem, was Sie brauchen, geben sollte. Es hat auch Beispiele controller.js, services.js und app.js Dateien, so dass Sie nur von dort erstellen können. Es hilft Ihnen auch, Ihr Projekt korrekt zu strukturieren, um zu verhindern, dass unerwartete Daten in Ihr Tag gelangen.

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

** Bonus: Es gibt auch einen netten Trick in Quelle 2, die Sie zeigt, wie alle Vorlagen in Ihrer Datei index.html halten um die Anwendung zu beschleunigen und vereinfachen Sie Ihren Workflow.

Goodluck.