我需要在不同的页面/视图中显示和隐藏后退按钮。我参考了Justin Noel:
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button hide-back-button="{{hideBackButton}}">
</ion-nav-back-button>
</ion-nav-bar>
</body>
App控制器切换按钮显示:
.controller('AppCtrl', function($scope, $location) {
var path = $location.path();
if (path.indexOf('submit') != -1)
$scope.hideBackButton = true;
else
$scope.hideBackButton = false;
})
但是这不起作用,因为控制器只被调用一次,而不是在不同状态下的视图变化。同时从其他控制器(链接到不同状态)更改$ scope.hideBackButton的值对按钮显示没有任何影响。
任何人都可以告诉我如何在每个导航上切换后退按钮显示。我在这里缺少什么?
答案 0 :(得分:36)
今天我遇到了同样的问题。
最简单的解决方案是使用$ ionicNavBarDelegate:
.controller('AppCtrl', function($scope, $location, $ionicNavBarDelegate) {
var path = $location.path();
if (path.indexOf('submit') != -1)
$ionicNavBarDelegate.showBackButton(false);
else
$ionicNavBarDelegate.showBackButton(true);
})
您还可以在对象中包装hideBackButton值,您的代码将起作用:
.controller('AppCtrl', function($scope, $location) {
var path = $location.path();
$scope.options = $scope.options || {};
if (path.indexOf('submit') != -1)
$scope.options.hideBackButton = true;
else
$scope.options.hideBackButton = false;
})
它起作用,因为在JS中(和许多其他语言一样)布尔值是通过值传递的,而对象是通过referance传递的,它会影响默认的Angular观察者的创建方式。 这种方法的缺点是隐藏按钮不像其他离子解决方案那样平滑。
以防万一,这就是你的HTML应该是这样的:
第一个解决方案:
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
</body>
第二个解决方案:
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button hide-back-button="{{options.hideBackButton}}">
</ion-nav-back-button>
</ion-nav-bar>
</body>
答案 1 :(得分:32)
hide-back-button
上的<ion-view>
属性为我做了诀窍:<ion-view hide-back-button="true">
请参阅官方文档here。
答案 2 :(得分:30)
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('app.home');
答案 3 :(得分:2)
实现此目的的一种非常简单的方法是将menu-close
指令应用于按钮/锚点。从技术上讲,这意味着关闭菜单,但你可以在任何链接上使用它,它将绕过幻灯片动画&amp;不会显示后退按钮。
<a menu-close href="#/home">Home</a>
答案 4 :(得分:2)
$ionicHistory.nextViewOptions({
disableBack: false,
historyRoot: true
});
这似乎是一个很好的选择,对我来说很好。
答案 5 :(得分:2)
Ionic 2&amp; 3:
<ion-navbar [hideBackButton]="true">
答案 6 :(得分:1)
您可以更改缓存设置,以便在重新加载页面时再次调用控制器: http://ionicframework.com/docs/api/directive/ionNavView/
答案 7 :(得分:1)
应在hide-back-button
标记上设置ion-view
属性。
答案 8 :(得分:0)
我有&#34;隐藏后退按钮&#34;,因为它隐藏了菜单和后退按钮。
以某种方式this.navCtrl.push
使用后退按钮播放,以防您希望使用this.nav.setRoot(yourPage)
显示菜单