Erstellen von Ansichten, außen-Ionen-tabs auf dem Ionic Framework
Ich bin neu Ionic-aber es ist schon eine lange Zeit, da wollte ich es ausprobieren. Ich bin einfach nur zu spielen um so vielleicht bin ich nicht immer die volle Konzept.
Ich versuche zu tun, eine einfache Anwendung mit drei Laschen an der Unterseite und ein Einstellungen-Symbol, das dort für alle drei Registerkarten. Wenn Sie klicken Sie in dieses Symbol, um angeblich die tabs zu verstecken und zeigen Sie den Bildschirm Einstellungen.
Da ich nicht möchte, dass die Benutzer verlieren alle Inhalte, alle views Erben von 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 tabs/view
sieht 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 der 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>
Erste, was ich mich Frage ist: gibt es eine Möglichkeit, verwenden diese Schaltflächen zwischen allen Ansichten? Scheint nutzlos zu definieren, Sie über und über.
Aber das ist nicht die Reale Sache™. Wenn ich auf Einstellungen, dann bekommst du etwas gespritzt in die ion-nav-view
aber es enthält eine Menge Sachen (die nicht auf der Vorlage), und auch nicht ausblenden, die andere Sicht, noch die tabs.
Einige screenshot:
http://forum.ionicframework.com/uploads/default/_optimized/410/778/37f711d3f9_312x500.png
Was sollte der richtige Ansatz dafür?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist meine erste Zeit mit der Beantwortung einer Frage hier, also habt bitte Geduld mit mir.
Zum navigieren zu einer Ansicht ohne die tab-Leiste:
Entfernen Sie die "app" - Präfix aus dem Einstellungen-Zustand, so ist es kein Kind mehr an der übergeordneten abstrakten Staat (app).
** * * * Wenn Sie irgendwelche Staaten nach diesem hier, löschen Sie das Semikolon, in der Erwägung, dass das Semikolon kennzeichnet das Ende.
DAS IST EINE BAND-AID-LÖSUNG.
Die vollständige Lösung für Ihr problem zu beginnen ist eine Ionische Projekt-Vorlage. Zum Glück haben Sie ein Registerkarten-option, die eine Globale tab-Leiste.
Kommando-Zeile:
ionic start appName tabs
Geben sollte, Ihnen eine passende ab-Vorlage mit alles, was Sie brauchen. Es hat auch Probe controllers.js, services.js und app.js Dateien, so können Sie nur bauen von dort aus. Es wird auch Ihnen helfen, Ihr Vorhaben zu strukturieren, richtig zu verhindern, dass unerwartete Daten aus der Injektion in Ihren tag.
Quelle 1: http://ionicframework.com/getting-started/
Quelle 2: http://ionicframework.com/docs/api/directive/ionNavView/
**Bonus: Es ist auch ein netter trick, in Quelle 2, die Ihnen zeigt, wie man alle Vorlagen in Ihrem index.html Datei, um die Geschwindigkeit der app und vereinfachen Sie Ihren workflow.
Goodluck.