在 ionic 中隐藏后退按钮，angularjs

Question

我需要在不同的 pages/views 中显示和隐藏后退按钮。我参考了 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>

用于切换按钮显示的应用程序控制器：

.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

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

Answer 2

我今天遇到了完全相同的问题。

最简单的解决方案是使用 $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 中（与许多其他语言一样）布尔值是按值传递的，对象是按引用传递的，它会影响默认 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 3

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

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

Answer 4

<ion-view> 上的 hide-back-button 属性对我有用：<ion-view hide-back-button="true">

查看官方文档here。

Answer 5

实现此目的的一个非常简单的方法是将 menu-close 指令应用于您的 button/anchor。从技术上讲，它用于关闭菜单，但您可以在任何 link 上使用它，它会绕过幻灯片动画并且不会显示后退按钮。

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

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

Answer 6

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

Answer 7

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

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

Answer 8

离子 2 和 3： <ion-navbar [hideBackButton]="true">

Answer 9

我在使用 "hide-back-button" 时遇到了问题，因为它隐藏了菜单和后退按钮。以某种方式 this.navCtrl.push 使用后退按钮播放，以防您希望使用 this.nav.setRoot(yourPage)

显示菜单

在 ionic 中隐藏后退按钮，angularjs

hiding back button in ionic, angularjs

angularjs

ionic