离子选项卡和侧面菜单导航问题

I learn and try to create an ionic app with tabs combining the side menu.

我学习并尝试使用结合侧面菜单的选项卡创建离子应用程序。

这是它的样子（Codepen）：

The side-menu part is okay. There is an additional link on my home page. Here is my problem: After clicking the link, I can go back to the previous page only through the back button. And my home tab doesn't work. I try to add another link to my about page, and either back button or home tab could go back to the previous page, which is the home page.

侧边菜单部分没问题。我的主页上还有一个附加链接。这是我的问题：点击链接后，我只能通过后退按钮返回上一页。我的主页选项卡不起作用。我尝试添加另一个链接到我的about页面，后退按钮或主页选项卡可以返回到上一页，即主页。

Here is my .js file:

这是我的.js文件：

angular.module('demo', ['ionic'])

.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/')

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: 'home.html'
    })

    .state('about', {
      url: '/about',
      templateUrl: 'about.html'
    })

    .state('contact', {
      url: '/contact',
      templateUrl: 'contact.html'
    })
})

.controller('MyCtrl', function ($scope, $ionicSideMenuDelegate) {
  $scope.showRightMenu = function () {
    $ionicSideMenuDelegate.toggleRight();
  };
});

I looked for other similar issues and tried to switch the href to ui-sref. The home tab still doesn't work. Did I miss something?

我寻找其他类似的问题，并试图将href切换到ui-sref。主页选项卡仍然不起作用。我错过了什么？

And here is my .html:

这是我的.html：

<body ng-app="demo" ng-controller="MyCtrl">

<ion-side-menus>
  <ion-side-menu-content>
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear">
        <i class="ion-arrow-left-c"></i> Back </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <ion-tabs class="tabs-icon-top tabs-positive">
      <ion-tab title="Home" icon="ion-home" ui-sref="home">
        <ion-nav-view name="home"></ion-nav-view>
      </ion-tab>

      <ion-tab title="About" icon="ion-ios-information" ui-sref="about">
        <ion-nav-view name="about"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Setting" icon="ion-navicon" ng-click="showRightMenu()">
      </ion-tab>
    </ion-tabs>
  </ion-side-menu-content>

  <ion-side-menu side="right">
    <ion-header-bar class="bar-dark">
      <h1 class="title">Setting</h1>
    </ion-header-bar>

    <ion-content has-header="true">
      <ion-list>
        <ion-item>Setting</ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

<script id="home.html" type="text/ng-template">
  <ion-view view-title="Home">
    <ion-content class="padding">
      <a class="button button-stable button-block" ui-sref="contact">Contact</a>
      <a class="button button-stable button-block" ui-sref="about">About</a>
    </ion-content>
  </ion-view>
</script>

<script id="about.html" type="text/ng-template">
  <ion-view view-title="About">
    <ion-content class="padding">
    </ion-content>
  </ion-view>
</script>

<script id="contact.html" type="text/ng-template">
  <ion-view view-title="Contact">
    <ion-content class="contactBg" scroll="false">
    </ion-content>
  </ion-view>
</script>

1 个解决方案

#1

Tabs have history only when you navigate to a sub item; a child element in the tab. That's the only situation when you should have a back button inside a tab.

选项卡仅在您导航到子项目时具有历史记录;选项卡中的子元素。这是唯一的情况，你应该在选项卡中有一个后退按钮。

First thing I've noticed, you're referencing an old version of the framework:

我注意到的第一件事是，你引用了旧版本的框架：

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

I would suggest to use the latest, stable:

我建议使用最新的，稳定的：

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

Then you're trying to wrap everything inside a big container.

然后你试图将所有东西都包装在一个大容器里。

Normally what you would do is create a menu (menu.html):

通常你要做的是创建一个菜单（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>

Where you have a <ion-nav-view name="menuContent"></ion-nav-view>. That's the place where all the views will be loaded.

你有的地方。这是所有视图将被加载的地方。

I've hidden the navigation button for the menu so you won't see it:

我隐藏了菜单的导航按钮，所以你不会看到它：

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

Then you would have your tabs container (tabs.html):

然后你会有你的标签容器（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>

I've hidden the tab contacts class="ng-hide" cause I don't really understand what you're trying to do there (it will be loaded when you click the button in the home page):

我隐藏了标签联系人class =“ng-hide”因为我真的不明白你在那里做什么（当你点击主页上的按钮时它会被加载）：

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

Each tab has got its ion-nav-view container where the specific tabs will be loaded:

每个选项卡都有其离子导航视图容器，其中将加载特定选项卡：

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

You should configure your states so that the menu is the main, 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');
});

The state for the tabs container (app.tabs) will be loaded in the menuContent

选项卡容器（app.tabs）的状态将加载到menuContent中

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

while all the others (specific tab) will have their own view:

而所有其他（特定标签）将有自己的视图：

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

I've also used a controller for the tabs container => tabsController:

我还使用了tabs容器=> tabsController的控制器：

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

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

});

so you can manage your side-menu.

所以你可以管理你的副菜单。

Roughly your app should look like this.

大概你的应用程序应该是这样的。

#1