离子标签和侧边菜单导航问题 [英] Ionic tabs and side menu navigation issue
问题描述
我学习并尝试创建一个带有结合侧边菜单的选项卡的 ionic 应用.
I learn and try to create an ionic app with tabs combining the side menu.
侧菜单部分没问题.我的主页上有一个附加链接.这是我的问题:单击链接后，我只能通过后退按钮返回上一页.我的主页选项卡不起作用.我尝试向我的关于页面添加另一个链接，后退按钮或主页选项卡都可以返回上一页，即主页.
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.
这是我的 .js 文件:
Here is my .js file:
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.主页选项卡仍然不起作用.我错过了什么吗?
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?
这是我的 .html:
And here is my .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>
推荐答案
只有当你导航到一个子项时，标签才有历史记录；选项卡中的子元素.这是您应该在选项卡内设置后退按钮的唯一情况.
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.
通常您要做的是创建一个菜单 (menu.html):
Normally what you would do is create a menu (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>
-->
然后你会有你的标签容器(tabs.html):
Then you would have your 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>
我隐藏了标签联系人 class="ng-hide" 因为我真的不明白你想在那里做什么(当你点击按钮时它会被加载主页):
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):
<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 容器，其中将加载特定的标签:
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');
});
标签容器(app.tabs)的状态将被加载到menuContent
The state for the tabs container (app.tabs) will be loaded in the 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",
}
}
})
我还为标签容器使用了一个控制器 => tabsController:
I've also used a controller for the tabs container => 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.
这篇关于离子标签和侧边菜单导航问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
