Ionic-Registerkarten und seitliche Menü-navigation Problem

Tabs haben eine Geschichte, die nur, wenn Sie navigieren Sie zu einem sub-Element; ein Kind-element in der tab. Das ist die einzige situation, sollten Sie eine Schaltfläche "zurück" innerhalb einer Registerkarte.

Erste Sache, die ich bemerkt habe, Sie verweisen auf eine alte version von Rahmen:

<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>

Ich würde vorschlagen, die Verwendung der aktuellsten, stabilen:

<link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>

Dann Sie versuchen, wickeln Sie alles in einem großen container.

Normalerweise das, was Sie tun würden, um ein Menü zu erstellen (menu.html):

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <!--
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
      -->
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="right">
    <ion-header-bar class="bar-dark">
      <h1 class="title">Settings</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
                <ion-item nav-clear href="#">
          Settings
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Wo Sie eine <ion-nav-view name="menuContent"></ion-nav-view>.
Das ist der Ort, wo alle Ansichten geladen werden.

Habe ich versteckt die Navigations-Taste für das Menü, so dass Sie es nicht sehen:

<!--
<ion-nav-buttons side="right">
    <button class="button button-icon button-clear ion-navicon" menu-toggle="right"></button>
</ion-nav-buttons>
-->

Dann hätten Sie Ihre tabs-container (tabs.html):

<ion-view view-title="Tabs">
  <ion-tabs class="tabs-icon-top tabs-positive">
    <ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="app.tabs.home">
      <ion-nav-view name="home"></ion-nav-view>
    </ion-tab>

    <ion-tab title="About" icon-on="ion-ios-information" icon-off="ion-ios-information-outline" ui-sref="app.tabs.about">
      <ion-nav-view name="about"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Contact" ui-sref="app.tabs.contact" class="ng-hide">
      <ion-nav-view name="contact"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Setting" icon-on="ion-navicon" icon-off="ion-navicon" ng-click="showRightMenu()"></ion-tab>
  </ion-tabs>
</ion-view>

Habe ich versteckte die Registerkarte Kontakte class="ng-hide" Ursache, die ich nicht wirklich verstehen, was Sie zu tun versuchen (es wird geladen, wenn Sie klicken Sie auf die Schaltfläche auf der Startseite):

<ion-tab title="Contact" ui-sref="app.tabs.contact" class="ng-hide">
    <ion-nav-view name="contact"></ion-nav-view>
</ion-tab>

Jedes tab hat seine ion-nav-view container, in denen die spezifischen tabs geladen werden:

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

Konfigurieren Sie Ihren Staaten so, dass das Menü ist das wichtigste, abstract state:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "menu.html"
  })

  .state('app.tabs', {
    url: "/tabs",
    views: {
      'menuContent': {
        templateUrl: "tabs.html",
        controller: 'tabsController'
      }
    }
  })

  .state('app.tabs.home', {
    url: "/home",
    views: {
      'home': {
        templateUrl: "home.html",
      }
    }
  })

  .state('app.tabs.about', {
    url: "/about",
    views: {
      'about': {
        templateUrl: "about.html",
      }
    }
  })

  .state('app.tabs.contact', {
      url: "/contact",
      views: {
        'contact': {
          templateUrl: "contact.html"
        }
      }
    });
  //if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/tabs');
});

Den Zustand der Registerkarten-container (app.tabs) geladen werden, die in der menuContent

  .state('app.tabs', {
    url: "/tabs",
    views: {
      'menuContent': {
        templateUrl: "tabs.html",
        controller: 'tabsController'
      }
    }
  })

während alle anderen (eigenes Register), haben Ihre eigene Ansicht:

  .state('app.tabs.home', {
    url: "/home",
    views: {
      'home': {
        templateUrl: "home.html",
      }
    }
  })

Habe ich auch verwendet, eine Steuerung für die tabs-container => tabsController:

.controller('tabsController', function($scope, $ionicSideMenuDelegate) {

  $scope.showRightMenu = function() {
    $ionicSideMenuDelegate.toggleRight();
  };

});

so verwalten Sie Ihre Seite-Menü.

Etwa Ihre app Aussehen sollte diese.