Question

我需要在不同的页面/视图中显示和隐藏后退按钮。我参考了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的值对按钮显示没有任何影响。

任何人都可以告诉我如何在每个导航上切换后退按钮显示。我在这里缺少什么？

Answer 1

今天我遇到了同样的问题。

最简单的解决方案是使用$ 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>

Answer 2

hide-back-button上的<ion-view>属性为我做了诀窍：<ion-view hide-back-button="true">

请参阅官方文档here。

Answer 3

$ionicHistory.nextViewOptions({
    disableBack: true
  });

  $state.go('app.home');

Answer 4

实现此目的的一种非常简单的方法是将menu-close指令应用于按钮/锚点。从技术上讲，这意味着关闭菜单，但你可以在任何链接上使用它，它将绕过幻灯片动画＆amp;不会显示后退按钮。

<a menu-close href="#/home">Home</a>

http://ionicframework.com/docs/api/directive/menuClose/

Answer 5

 $ionicHistory.nextViewOptions({
          disableBack: false,
          historyRoot: true
        });

这似乎是一个很好的选择，对我来说很好。

Answer 6

Ionic 2＆amp; 3： <ion-navbar [hideBackButton]="true">

Answer 7

您可以更改缓存设置，以便在重新加载页面时再次调用控制器： http://ionicframework.com/docs/api/directive/ionNavView/

Answer 8

应在hide-back-button标记上设置ion-view属性。

Answer 9

我有＆＃34;隐藏后退按钮＆＃34;，因为它隐藏了菜单和后退按钮。以某种方式this.navCtrl.push使用后退按钮播放，以防您希望使用this.nav.setRoot(yourPage)显示菜单

隐藏在离子，angularjs中的按钮

9 个答案: