Ionic-framework: Шаблон бокового меню, ion-nav-back-button, ion-navicon и $ state.go ('/ app / playlists');

Созданный на 4 янв. 2015  ·  3Комментарии  ·  Источник: ionic-team/ionic-framework

В шаблоне бокового меню есть несколько вложенных состояний, определенных в app.js. Когда вы переходите во вложенное состояние (например, 'app.single'), ion-nav-bar обновляется с помощью кнопки «<Назад».

Когда вы возвращаетесь на «домашнюю страницу» («/ app / playlists»), кнопка «Назад» заменяется на значок ion-navicon (см. Menu.html). Вы также можете перейти на домашнюю страницу (playlists.html), добавив простую функцию к контроллеру:

$scope.goHome = function() {
  $state.go('app.playlists');
};

Если вы добавите еще один уровень вложенного состояния:

.state('app.playlists.classic-rock', {
  url: "/classic-rock",
  views: {
    'menuContent<strong i="10">@app</strong>': {
      templateUrl: "templates/classic-rock.html",
       controller: 'ClassicRockController'
    }
  }
})

И вызовите функцию goHome () из контроллера представлений, который вы выполняете при переходе на домашнюю страницу, однако кнопка возврата НЕ заменяется на ion-navicon?

Это также верно, если вы переходите от одного представления к другому, а затем обратно на «домашнюю страницу»:

  • http: // localhost : 8100 / # / app / playlists (ion-nav-bar имеет ion-navicon)
  • http: // localhost : 8100 / # / app / playlists / 1 (на панели ion-nav-bar есть кнопка <Назад)
  • http: // localhost : 8100 / # / app / playlists / 2 (на панели ion-nav-bar есть кнопка <Назад)
  • http: // localhost : 8100 / # / app / playlists (ion-nav-bar имеет кнопку «<Назад», но должен иметь значок ion-navicon)
picture RobFerguson

Самый полезный комментарий

Итак, то, что вы описываете, и разметка на самом деле верны.

http://codepen.io/mhartington/pen/azwojR

То, что вы описываете, вызвано атрибутом закрытия меню.

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

Поэтому, когда вы перемещаетесь через боковое меню, ссылки с атрибутом закрытия меню очищают историю и предотвращают отображение кнопки возврата.

В вашем случае вы перемещаетесь через $state.go , в котором нет логики, обеспечиваемой закрытием меню.

Так что вам нужно немного добавить к нему.

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};
picture mhartington 18 февр. 2015
👍6

Все 3 Комментарий

В файле menu.html шаблона бокового меню:

<ion-nav-bar class="bar-stable">
     <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
       <button class="button button-icon button-clear ion-navicon" 
            menu-toggle="left">
       </button>
      </ion-nav-buttons>
</ion-nav-bar>

ion-nav-buttons должен быть прямым потомком ion-nav-view НЕ ion-nav-bar.

Обновлено menu.html:

<ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
</ion-nav-bar>

и обновил playlists.html:

<ion-view view-title="Playlists">

    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" 
            menu-toggle="left">
        </button>
    </ion-nav-buttons>

  <ion-content>
    <ion-list>
      <ion-item ng-repeat="playlist in playlists" 
          href="#/app/playlists/{{playlist.id}}">
          {{playlist.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>
RobFerguson picture RobFerguson 5 янв. 2015

Итак, то, что вы описываете, и разметка на самом деле верны.

http://codepen.io/mhartington/pen/azwojR

То, что вы описываете, вызвано атрибутом закрытия меню.

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

Поэтому, когда вы перемещаетесь через боковое меню, ссылки с атрибутом закрытия меню очищают историю и предотвращают отображение кнопки возврата.

В вашем случае вы перемещаетесь через $state.go , в котором нет логики, обеспечиваемой закрытием меню.

Так что вам нужно немного добавить к нему.

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};
mhartington picture mhartington 18 февр. 2015
👍6

спасибо @mhartington ....
это решило мою проблему ...

foram-patel picture foram-patel 7 сент. 2016
Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

alexbainbridge picture alexbainbridge  ·  3Комментарии
GeorgeAnanthSoosai picture GeorgeAnanthSoosai  ·  3Комментарии
SebastianGiro picture SebastianGiro  ·  3Комментарии
masimplo picture masimplo  ·  3Комментарии
alan-agius4 picture alan-agius4  ·  3Комментарии