hiding back button in ionic, angularjs

2019-01-17 04:13发布

站内问答 / 前端开发
1401 9 6

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?

9条回答
▲ chillily
2楼-- · 2019-01-17 04:45 
 $ionicHistory.nextViewOptions({
          disableBack: false,
          historyRoot: true
        });

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

查看更多
0人赞 添加讨论(0) 举报
狗以群分
3楼-- · 2019-01-17 04:53

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) 举报
狗以群分
4楼-- · 2019-01-17 04:54

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) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)