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)

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π˜Ρ‚Π°ΠΊ, Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ описываСтС, ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π½Π° самом Π΄Π΅Π»Π΅ Π²Π΅Ρ€Π½Ρ‹.

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

ВсС 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>

Π˜Ρ‚Π°ΠΊ, Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ описываСтС, ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π½Π° самом Π΄Π΅Π»Π΅ Π²Π΅Ρ€Π½Ρ‹.

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 ....
это Ρ€Π΅ΡˆΠΈΠ»ΠΎ мою ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ...

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ