Question

我学习并尝试使用结合侧边菜单的标签创建离子应用程序。

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

这是我的.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();
  };
});

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

这是我的.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>

Answer 1

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

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

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

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

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

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

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

你有<ion-nav-view name="menuContent"></ion-nav-view>的地方。这就是加载所有视图的地方。

我已隐藏菜单的导航按钮，因此您无法看到它：

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

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

我已隐藏标签联系人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>

每个标签都有ion-nav-view容器，其中将加载特定标签：

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

您应该配置状态，以便菜单是主要的抽象状态：

.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');
});

标签容器（app.tabs）的状态将加载到menuContent

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

而所有其他人（特定标签）都有自己的观点：

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

我还使用了标签容器的控制器=＆gt; tabsController：

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

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

});

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

您的应用应该看起来像this。

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

1 个答案: