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?

Schreibe einen Kommentar