Прячущаяся кнопка в ионном, угловом

Мне нужно отображать и скрывать кнопку на разных страницах/представлениях. Я ссылался на Джастин Ноэль:

<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 от других контроллеров (связанных с разными состояниями) не оказывает никакого влияния на отображение кнопки.

Может ли кто-нибудь сказать мне, как переключать отображение кнопки на каждой навигации. Что мне здесь не хватает?

Ответы

Ответ 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:

1-е решение:

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

Ответ 2

Атрибут hide-back-button в <ion-view> помог мне: <ion-view hide-back-button="true">

Смотри официальную документацию здесь.

Ответ 3

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

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

Ответ 4

Ионные 2 и 3: <ion-navbar [hideBackButton]="true">

Ответ 5

Очень простой способ добиться этого - применить директиву menu-close к вашей кнопке/якорю. Технически это означало закрытие меню, но вы можете использовать его по любой ссылке, и оно будет обходить анимацию слайдов и не будет отображать кнопку "Назад".

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

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

Ответ 6

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

Это кажется хорошим вариантом для использования, отлично работает для меня.

Ответ 8

Атрибут hide-back-button должен быть установлен в теге ion-view.

Ответ 9

У меня были проблемы с "спрятать кнопку назад", так как она скрывает меню и кнопку назад. Каким-то образом this.navCtrl.push воспроизводится с помощью кнопки назад, если вы хотите, чтобы меню отображалось с помощью this.nav.setRoot(yourPage)