发表新帖
发表新帖

hiding back button in ionic, angularjs

后端 未结
关注
9 1483
独厮守ぢ
独厮守ぢ 2020-12-08 10:57

I need to show and hide back button in different pages/views. I took reference from Justin Noel:
相关标签:
9条回答
  • 长情又很酷
    2020-12-08 11:42

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

    0 讨论(0)
  • 说谎
    2020-12-08 11:44

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

    0 讨论(0)
  • 一生所求
    2020-12-08 11:49

    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)

    0 讨论(0)
  • 说谎
    2020-12-08 11:51

    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/

    0 讨论(0)
  • 梦毁少年i
    2020-12-08 11:57 
     $ionicHistory.nextViewOptions({
          disableBack: false,
          historyRoot: true
        });

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

    0 讨论(0)
  • 灰色年华
    2020-12-08 11:58

    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>
    0 讨论(0)
 看不清?
提交回复
热议问题