隐藏离子，angularjs中的后退按钮答案

【问题标题】：hiding back button in ionic, angularjs隐藏离子，angularjs中的后退按钮
【发布时间】：2015-02-04 23:25:18
【问题描述】：

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

谁能告诉我如何在每个导航上切换后退按钮显示。我在这里错过了什么？

【问题讨论】：

标签： angularjs ionic

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

【讨论】：

对我来说，只需在 ion-view 标签上添加 hide-back-button 就可以了，就像在这个 codepen 上一样：codepen.io/calendee/pen/eusfl

【解决方案2】：

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

见官方文档here。

【讨论】：

如果您只是想在没有任何条件的情况下隐藏后退按钮，这是最好的解决方案。谢谢。

【解决方案3】：

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

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

【讨论】：

$ionicViewService 已弃用。使用 $ionicHistory.nextViewOptions
你知道吗？ . .> > > > 你真是个很棒的人，能以体面的方式帮助我:))

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

它适用于 ui-sref，但 menu-close 实际上会清除历史记录，这就是您看不到后退按钮（没有后退状态）的原因。我认为 nfgf 的答案更好。

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

我遇到了“隐藏后退按钮”的问题，因为它隐藏了菜单和后退按钮。不知何故 this.navCtrl.push 使用后退按钮播放，以防您希望使用 this.nav.setRoot(yourPage) 显示菜单

【讨论】：