ionic / angular 1.3 - 当 ion-side-menus 存在于视图中时缺少 ion-nav-back-button
ionic / angular 1.3 - Missing ion-nav-back-button when ion-side-menus exist inside view
我似乎无法弄清楚如何让后退按钮出现在包含 ion-side-menus 指令的视图上。
这是我想出的最简单的例子:
http://codepen.io/jsplaine/pen/YPxvXL?editors=101。
请注意,状态 x.emptyView 和状态 x.emptySideMenu 中的离子视图是状态 x 的离子导航视图的子视图。
这是一个更深入的示例,其中存在一个实际填充的侧边菜单:
http://codepen.io/jsplaine/pen/ZYJRYW?editors=101
这是第一个代码笔的基本路由器:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
url: "/",
templateUrl: "templates/home.html",
controller: 'AppCtrl'
})
.state('x', {
url: "/x",
abstract: true,
template: '<ion-nav-view animation="slide-left-right"/>'
})
.state('x.emptyView', {
url: "/empty-view",
templateUrl: "templates/empty_view_only.html"
})
.state('x.emptySideMenu', {
url: "/empty-side-menu",
templateUrl: "templates/empty_side_menu.html"
})
})
更深入的代码笔还有第二个问题。根据您首先单击的选项卡,第 2 个或第 3 个,相应的模板将被缓存以供将来导航到第 2 个和第 3 个模板。先点第二个,再点第三个。然后重新开始,先单击第 3 个,然后单击第 2 个。发生这种情况的事实让我觉得我在使用 ui-router 时出错了。
我也不明白为什么我必须在 index.html 和抽象状态 ('x') 模板中定义 ion-nav-view。状态 'x' 不是 index.html(空状态)的子级吗?
有人能想出如何修改两个代码笔,以便后退按钮出现在包含 ion-side-menus 指令的视图上,并且对于第二个代码笔..第二个和第三个选项卡缓存问题已解决?
我想知道作者是否没有考虑到您的情况。他们的模型是一个滑入式菜单,只能部分滑入,可以用菜单图标切换。所以你可能有点偏离范式,但这似乎对我有用,尽管在模板中复制导航栏代码有点蹩脚。
<script id="templates/empty_side_menu.html" type="text/ng-template">
<ion-view view-title="Empty side menu">
<ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-stable">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-side-menus>
</ion-side-menus>
</ion-view>
</script>
解决办法可以看这里:
http://codepen.io/jsplaine/pen/wBqNmw?editors=101
ion-side-menus 的父 ion-view 似乎需要一个子 ion-nav-bar,并且 enable-menu-with-back-views 必须设置为 true。
<!-- Side Menu Nav and Burger Defined -->
<script id="templates/side_menu_with_nav.html" type="text/ng-template">
<ion-view view-title="Side Menu with Nav and Burger">
<ion-nav-bar></ion-nav-bar> <!-- HERE -->
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar>
<ion-nav-back-button class="button-icon ion-arrow-left-c"></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>
....
正如离子 directive/menuToggle 文档所述:https://github.com/driftyco/ionic/blob/master/js/angular/directive/menuToggle.js#L1
- ### Button Hidden On Child Views
- By default, the menu toggle button will only appear on a root
- level side-menu page. Navigating in to child views will hide the menu-
- toggle button. They can be made visible on child pages by setting the
- enable-menu-with-back-views attribute of the {@link >ionic.directive:ionSideMenus}
- directive to true.
我似乎无法弄清楚如何让后退按钮出现在包含 ion-side-menus 指令的视图上。
这是我想出的最简单的例子: http://codepen.io/jsplaine/pen/YPxvXL?editors=101。
请注意,状态 x.emptyView 和状态 x.emptySideMenu 中的离子视图是状态 x 的离子导航视图的子视图。
这是一个更深入的示例,其中存在一个实际填充的侧边菜单: http://codepen.io/jsplaine/pen/ZYJRYW?editors=101
这是第一个代码笔的基本路由器:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
url: "/",
templateUrl: "templates/home.html",
controller: 'AppCtrl'
})
.state('x', {
url: "/x",
abstract: true,
template: '<ion-nav-view animation="slide-left-right"/>'
})
.state('x.emptyView', {
url: "/empty-view",
templateUrl: "templates/empty_view_only.html"
})
.state('x.emptySideMenu', {
url: "/empty-side-menu",
templateUrl: "templates/empty_side_menu.html"
})
})
更深入的代码笔还有第二个问题。根据您首先单击的选项卡,第 2 个或第 3 个,相应的模板将被缓存以供将来导航到第 2 个和第 3 个模板。先点第二个,再点第三个。然后重新开始,先单击第 3 个,然后单击第 2 个。发生这种情况的事实让我觉得我在使用 ui-router 时出错了。
我也不明白为什么我必须在 index.html 和抽象状态 ('x') 模板中定义 ion-nav-view。状态 'x' 不是 index.html(空状态)的子级吗?
有人能想出如何修改两个代码笔,以便后退按钮出现在包含 ion-side-menus 指令的视图上,并且对于第二个代码笔..第二个和第三个选项卡缓存问题已解决?
我想知道作者是否没有考虑到您的情况。他们的模型是一个滑入式菜单,只能部分滑入,可以用菜单图标切换。所以你可能有点偏离范式,但这似乎对我有用,尽管在模板中复制导航栏代码有点蹩脚。
<script id="templates/empty_side_menu.html" type="text/ng-template">
<ion-view view-title="Empty side menu">
<ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-stable">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-side-menus>
</ion-side-menus>
</ion-view>
</script>
解决办法可以看这里:
http://codepen.io/jsplaine/pen/wBqNmw?editors=101
ion-side-menus 的父 ion-view 似乎需要一个子 ion-nav-bar,并且 enable-menu-with-back-views 必须设置为 true。
<!-- Side Menu Nav and Burger Defined -->
<script id="templates/side_menu_with_nav.html" type="text/ng-template">
<ion-view view-title="Side Menu with Nav and Burger">
<ion-nav-bar></ion-nav-bar> <!-- HERE -->
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar>
<ion-nav-back-button class="button-icon ion-arrow-left-c"></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>
....
正如离子 directive/menuToggle 文档所述:https://github.com/driftyco/ionic/blob/master/js/angular/directive/menuToggle.js#L1
- ### Button Hidden On Child Views
- By default, the menu toggle button will only appear on a root
- level side-menu page. Navigating in to child views will hide the menu-
- toggle button. They can be made visible on child pages by setting the
- enable-menu-with-back-views attribute of the {@link >ionic.directive:ionSideMenus}
- directive to true.