可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I need to show and hide back button in different pages/views. I took reference from 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 to toggle button display:

.controller('AppCtrl', function($scope, $location) {
   var path = $location.path();
   if (path.indexOf('submit') != -1)
     $scope.hideBackButton = true;
   else
     $scope.hideBackButton = false;
})

But this doesnt work as controller is called only once but not at the change of view in different states. Also changing the value of $scope.hideBackButton from other controllers(linked to different states) does not have any effect on the button display.

Can anyone tell me how to toggle back-button display on each navigation. What am I missing here?

回答1:

I had exactly same problem today.

Simplest solution is to use $ionicNavBarDelegate:

.controller('AppCtrl', function($scope, $location, $ionicNavBarDelegate) {
   var path = $location.path();
   if (path.indexOf('submit') != -1)
     $ionicNavBarDelegate.showBackButton(false);
   else
     $ionicNavBarDelegate.showBackButton(true);
})

You can also wrap hideBackButton value in object and your code will work:

.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;
})

It works because in JS (as in many other languages) booleans are passed by value and object are passed by the referance and it affects how default Angular watchers are created. The downside of this method is that hidding of the button is not as smooth as in other ionic solutions.

Just in case, this is how your html should look like:

1st solution:

<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>

2nd solution:

<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>

回答2:

The hide-back-button attribute on <ion-view> did the trick for me: <ion-view hide-back-button="true">

See the official documentation here.

回答3:

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

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

回答4:

A very simple way to achieve this is to apply the menu-close directive to your button/anchor. Technically it's meant for closing the menu, but you can use it on any link and it will bypass the slide animation & won't show the back button.

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

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

回答5:

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

That seems a good option to use, works fine for me.

回答6:

Ionic 2 & 3: <ion-navbar [hideBackButton]="true">

回答7:

You can change the cache settings so that when the page is reloaded the controller is called again: http://ionicframework.com/docs/api/directive/ionNavView/

回答8:

The hide-back-button attribute should be set on ion-view tag.

回答9:

I had problems with "hide-back-button", since it hides the menu and the back button. Somehow this.navCtrl.push played with the back button, in case you want the menu to be displayed using this.nav.setRoot(yourPage)