选项卡和侧边菜单-状态链接不起作用
tab and side menu - links to state does not work
我已经根据这个答案构建了我的应用程序的结构:
如何在Ionic中设置选项卡的侧菜单?
结合侧边菜单和选项卡:
我的app.js文件是这样的:
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.tabs', {
url: '/tabs',
views: {
'menuContent': {
templateUrl: 'templates/tabs.html'
}
}
})
.state('app.tabs1.general', {
url: '/tabs1-general',
views: {
'general-tab': {
templateUrl: 'templates/general1.html',
controller: 'General1Ctrl'
}
}
})
.state('app.tabs2', {
url: '/tabs2',
views: {
'menuContent': {
templateUrl: 'templates/tabs2.html'
}
}
})
.state('app.tabs2.general', {
url: '/tabs2-general',
views: {
'general2-tab': {
templateUrl: 'templates/general2.html',
controller: 'General1Ctrl'
}
}
})
$urlRouterProvider.otherwise('/app/ofertas/ofertas-reporte');
当我在urlRouterProvider的otherwise
方法中设置路由时,一切正常,但是当我在侧边栏项中设置路由时,URL不匹配:
这是我的菜单:
<ion-content>
<ion-list class="coloredList">
<ion-item class="sap-color" menu-close href="#/app/tabs1">
<i class="ion-compose"></i> tabs1
</ion-item>
<ion-item class="sap-color" menu-close href="#/app/tabs2">
<i class="ion-android-star"></i> tabs2
</ion-item>
...
我也试过ui-sref,但似乎什么都不起作用。
任何建议吗?
似乎路由有问题,你可以试试这个吗:
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.tabs', {
url: '/tabs',
views: {
'menuContent': {
templateUrl: 'templates/tabs.html'
}
}
})
.state('app.tabs1', {
url: "/tabs1",
abstract: true,
views: {
'menuContent': {
templateUrl: "templates/tabs1.html",
controller: "Tabs1Ctrl"
}
}
})
.state('app.tabs1.general', {
url: '/tabs1-general',
views: {
'general-tab': {
templateUrl: 'templates/general1.html',
controller: 'General1Ctrl'
}
}
})
.state('app.tabs2', {
url: '/tabs2',
abstract: true,
views: {
'menuContent': {
templateUrl: 'templates/tabs2.html'
}
}
})
.state('app.tabs2.general', {
url: '/tabs2-general',
views: {
'general2-tab': {
templateUrl: 'templates/general2.html',
controller: 'General1Ctrl'
}
}
})
$urlRouterProvider.otherwise('/app/ofertas/ofertas-reporte');
签出这个项目:https://github.com/mircobabini/ionic-sidemenu-tabs-together我认为这是你需要的。这是一个较老的项目,可能需要一些更新,但它将作为一个起点。在codependency中有一个demo,链接在github上
您的子状态没有很好地声明,例如,在声明app.tabs1.general
状态之前,app.tabs1.general
需要具有app.tabs1
状态和abstract=true
。对其他状态依次类推,如下面的代码:
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.tabs', {
url: '/tabs',
views: {
'menuContent': {
templateUrl: 'templates/tabs.html'
}
}
})
.state('app.tabs1', {
url: "/tabs1",
abstract: true,
views: {
'menuContent': {
templateUrl: "templates/tabs1.html",
controller: "Tabs1Ctrl"
}
}
})
.state('app.tabs1.general', {
url: '/tabs1-general',
views: {
'general-tab': {
templateUrl: 'templates/general1.html',
controller: 'General1Ctrl'
}
}
})
.state('app.tabs2', {
url: '/tabs2',
abstract: true,
views: {
'menuContent': {
templateUrl: 'templates/tabs2.html'
}
}
})
.state('app.tabs2.general', {
url: '/tabs2-general',
views: {
'general2-tab': {
templateUrl: 'templates/general2.html',
controller: 'General1Ctrl'
}
}
})
你还需要在你的HTML中使用ui-sref
=你的状态而不是href
:
<ion-content>
<ion-list class="coloredList">
<ion-item class="sap-color" menu-close ui-sref="app.tabs1">
<i class="ion-compose"></i> tabs1
</ion-item>
<ion-item class="sap-color" menu-close href="app.tabs2">
<i class="ion-android-star"></i> tabs2
</ion-item>
...
这是我以前的一个项目。(http://aitam.newtonjoshua.com)
文档:https://newtonjoshua.com/apps/aitam/aitam.html
这都是关于离子导航视图的使用,它负责ui路由。
SideMenu:
app.js:在下面的例子中,有一个侧菜单,它有一个视图menuContent
menu.html:根据选择(tab1或tab2),内容菜单内容将是tab1.html或tab2.html
标签:
app.js: tab1有视图tab1-general(n) tab2有视图tab2-general(n)
tab1.html/tab2.html:根据TAB的选择显示相应的HTML内容。
app.js
// app.js
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
//tab1
.state('app.tab1', {
url: "/tab1",
views: {
// view name: menuContent
'menuContent': {
templateUrl: "templates/tab1.html",
controller: 'tabs1Ctrl'
}
}
})
.state('app.tab1.general1', {
url: '/general1',
views: {
// view name: tab1-general1
'tab1-general1': {
templateUrl: 'templates/tab1-general1.html',
controller: 'general1Ctrl'
}
}
})
//tab2
.state('app.tab2', {
url: "/tab2",
views: {
// view name: menuContent
'menuContent': {
templateUrl: "templates/tab2.html",
controller: 'tabs2Ctrl'
}
}
})
.state('app.tab2.general2', {
url: '/general2',
views: {
// view name: tab2-general2
'tab2-general2': {
templateUrl: 'templates/tab2-general2.html',
controller: 'general2Ctrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content >
<ion-nav-bar class="bar-navy" >
<ion-nav-buttons side="left" >
<button ng-show="sideMenu" class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<!--view name: menuContent-->
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-navy">
<h1 class="title" style="color:white">APP NAME</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/tab1" class="item-icon-left">
TAB 1
</ion-item>
<ion-item nav-clear menu-close href="#/app/tab2" class="item-icon-left">
TAB 2
</ion-item>
<ion-item nav-clear menu-close href="#/app/home" class="item-icon-left">
Home
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
tab1.html
<ion-view view-title="TAB 1">
<ion-content class="padding">
TAB 1
</ion-content>
<ion-tabs id="tab1" class="tabs-icon-bottom">
<ion-tab title="Tab 1 - General 1" icon-off="ion-ios-pie-outline" icon-on="ion-ios-pie" href="#/app/tab1/general1">
<!--view name: tab1-general1-->
<ion-nav-view name="tab1-general1"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 1 - General 2" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/app/tab1/general2">
<ion-nav-view name="tab1-general2"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
tab2.html
<ion-view view-title="TAB 2">
<ion-content class="padding">
TAB 2
</ion-content>
<ion-tabs id="tab2" class="tabs-icon-bottom">
<ion-tab title="Tab 2 - General 1" icon-off="ion-ios-pie-outline" icon-on="ion-ios-pie" href="#/app/tab2/general1">
<ion-nav-view name="tab2-general1"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 2 - General 2" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/app/tab2/general2">
<!--view name: tab2-general2-->
<ion-nav-view name="tab2-general2"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
查看此链接中的其他HTML和DEMO http://plnkr.co/edit/T1qr0BWWbtLfHQRJQGJf?p=preview
JS:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html'
})
.state('app.tabs', {
url: '/tabs',
views: {
'menuContent': {
templateUrl: 'tabs.html'
}
}
})
.state('app.tabs1-general', {
url: '/tabs1-general',
views: {
'menuContent': {
templateUrl: 'general1.html'
}
}
})
.state('app.tabs2', {
url: '/tabs2',
views: {
'menuContent': {
templateUrl: 'tabs2.html'
}
}
})
.state('app.tabs2-general', {
url: '/tabs2-general',
views: {
'menuContent': {
templateUrl: 'general2.html'
}
}
})
$urlRouterProvider.otherwise('/app/tabs');
});
HTML: <ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-header">
<button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
</ion-header-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<ion-list class="coloredList">
<ion-item class="sap-color" menu-close href="#/app/tabs">
<i class="ion-compose"></i> tabs1
</ion-item>
<ion-item class="sap-color" menu-close href="#/app/tabs2">
<i class="ion-android-star"></i> tabs2
</ion-item>
<ion-item class="sap-color" menu-close href="#/app/tabs1-general">
<i class="ion-compose"></i> tabs1-general
</ion-item>
<ion-item class="sap-color" menu-close href="#/app/tabs2-general">
<i class="ion-android-star"></i> tabs2-general
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
- 在Redux中链接async和sync操作以计算初始状态
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 流行状态历史和链接
- 如何将链接状态设置为在用户访问另一个页面之前保持
- 如何获取链接以保持活动状态
- 当单击<a>链接在chrome扩展中,popup.html如何保持打开状态
- 如何删除“;被访问”;当我滚动时从链接进入状态
- 如何在第一次点击时突出显示链接;并在第二次单击时跟随它,除非在其他地方单击,然后重新初始化未高亮显示的状态
- 当子菜单的父级或包含链接处于活动状态时,如何告知子菜单可见
- 如何将活动状态类动态更改(添加)到导航链接
- Yii:TbCollapse 多链接(href = #collapse 并将状态更新为 be=“1”)
- 获取左侧导航链接以保持打开和活动状态
- 打开打印窗口处于活动状态的 PDF 链接
- 当鼠标悬停在链接上时,从 href URL 中隐藏状态栏值
- 只要所有链接包含相同的值,它们都将处于活动状态
- 当用户将鼠标悬停在 Chrome 或 Firefox 中的链接上时,悬停状态未激活
- 当内容为空但超链接处于活动状态时删除元素
- Boostrap 3崩溃-基于崩溃状态链接图标
- 选项卡和侧边菜单-状态链接不起作用
- 带ui的AngularJS.路由器:点击相同状态链接时重新加载页面