离子导航问题
Ionic Navigation Issue
我正在尝试按如下方式开发离子导航
AppCtrl 登录或菜单
然后从菜单转到产品或订单或返回登录
我的app.html是这样的
<ion-nav-view name="appContent">
</ion-nav-view>
我的menu.html是这样的
<ion-view>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title"></h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/products">
Products
</ion-item>
<ion-item nav-clear menu-close href="#/app/orders">
Orders
</ion-item>
<ion-item nav-clear menu-close ng-click="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
而我的状态配置是这样的
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app/views/app.html",
controller: 'AppCtrl'
})
.state('app.login', {
url: "/login",
views: {
'appContent': {
templateUrl: "app/views/login.html",
controller: 'LoginCtrl'
}
}
})
.state('app.menu', {
url: "/menu",
views: {
'appContent': {
templateUrl: "app/views/menu.html",
controller: 'MenuCtrl'
}
}
})
.state('app.products', {
url: "/products",
views: {
'menuContent': {
templateUrl: "app/views/products.html",
controller: 'ProductsCtrl'
}
}
})
.state('app.productdetail', {
url: "/projects/:productid",
views: {
'menuContent': {
templateUrl: "app/views/productdetail.html",
controller: 'ProductDetailCtrl'
}
}
});
在 AppCtrl 中,我正在导航至“登录”或“菜单”。
它导航到 menu.html 成功,
之后,当我 select 产品或订单时,它不会进一步导航。
我注意到 menuContent 导航视图托管在 appContent 导航视图中。
ionic支持这种分层导航吗?
请在此处找到代码笔code
在使用这种分层视图时,我们需要指定视图需要在什么状态下渲染。在您的示例中更改以下代码行,将正确加载产品页面。
.state('app.products', {
url: "/products",
views: {
'menuContent@app.menu': {
templateUrl: "templates/products.html",
controller: 'ProductsCtrl'
}
}
});
注意视图名称的变化,menuContent@app.menu
这将指定路由器在菜单状态下呈现产品视图。在原始文档 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
中阅读更多相关内容
我正在尝试按如下方式开发离子导航
AppCtrl 登录或菜单
然后从菜单转到产品或订单或返回登录
我的app.html是这样的
<ion-nav-view name="appContent">
</ion-nav-view>
我的menu.html是这样的
<ion-view>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title"></h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/products">
Products
</ion-item>
<ion-item nav-clear menu-close href="#/app/orders">
Orders
</ion-item>
<ion-item nav-clear menu-close ng-click="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
而我的状态配置是这样的
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app/views/app.html",
controller: 'AppCtrl'
})
.state('app.login', {
url: "/login",
views: {
'appContent': {
templateUrl: "app/views/login.html",
controller: 'LoginCtrl'
}
}
})
.state('app.menu', {
url: "/menu",
views: {
'appContent': {
templateUrl: "app/views/menu.html",
controller: 'MenuCtrl'
}
}
})
.state('app.products', {
url: "/products",
views: {
'menuContent': {
templateUrl: "app/views/products.html",
controller: 'ProductsCtrl'
}
}
})
.state('app.productdetail', {
url: "/projects/:productid",
views: {
'menuContent': {
templateUrl: "app/views/productdetail.html",
controller: 'ProductDetailCtrl'
}
}
});
在 AppCtrl 中,我正在导航至“登录”或“菜单”。
它导航到 menu.html 成功,
之后,当我 select 产品或订单时,它不会进一步导航。
我注意到 menuContent 导航视图托管在 appContent 导航视图中。
ionic支持这种分层导航吗?
请在此处找到代码笔code
在使用这种分层视图时,我们需要指定视图需要在什么状态下渲染。在您的示例中更改以下代码行,将正确加载产品页面。
.state('app.products', {
url: "/products",
views: {
'menuContent@app.menu': {
templateUrl: "templates/products.html",
controller: 'ProductsCtrl'
}
}
});
注意视图名称的变化,menuContent@app.menu
这将指定路由器在菜单状态下呈现产品视图。在原始文档 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views