Ionic-framework: Template menu samping, ion-nav-back-button, ion-navicon dan $state.go('/app/playlists');

Dibuat pada 4 Jan 2015  ·  3Komentar  ·  Sumber: ionic-team/ionic-framework

Template sidemenu memiliki beberapa status bersarang yang ditentukan di app.js. Saat Anda menavigasi ke status bersarang (misalnya, 'app.single'), bilah navigasi ion diperbarui dengan tombol '< Kembali'.

Ketika Anda kembali ke 'home page' ('/app/playlists'), tombol kembali diganti dengan ion-navicon (lihat menu.html). Anda juga dapat beralih ke halaman beranda (playlists.html) dengan menambahkan fungsi sederhana ke pengontrol:

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

Jika Anda menambahkan tingkat status bersarang lainnya:

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

Dan aktifkan fungsi goHome() dari pengontrol tampilan yang Anda lakukan transisi ke halaman beranda namun tombol kembali TIDAK diganti dengan ion-navicon?

Ini juga terjadi jika Anda menavigasi dari satu tampilan ke tampilan lain dan kemudian kembali ke 'halaman beranda':

  • http://localhost :8100/#/app/playlists (ion-nav-bar memiliki ion-navicon)
  • http://localhost :8100/#/app/playlists/1 (ion-nav-bar memiliki tombol '< Kembali')
  • http://localhost :8100/#/app/playlists/2 (ion-nav-bar memiliki tombol '< Kembali')
  • http://localhost :8100/#/app/playlists (ion-nav-bar memiliki tombol '< Kembali' tetapi harus memiliki ion-navicon)
picture RobFerguson

Komentar yang paling membantu

Jadi apa yang Anda gambarkan dan markup sebenarnya benar.

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

Apa yang Anda gambarkan disebabkan oleh atribut menu-close.

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

Jadi saat Anda menavigasi melalui menu samping, tautan yang memiliki atribut tutup menu akan menghapus riwayat dan mencegah tombol kembali ditampilkan.

Dalam kasus Anda, Anda menavigasi melalui $state.go , yang tidak memiliki logika yang disediakan menu-close.

Jadi, Anda perlu menambahkannya sedikit.

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

Semua 3 komentar

Di menu.html template sidemenu:

<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 harus turunan langsung dari ion-nav-view BUKAN ion-nav-bar.

Menu.html yang diperbarui:

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

dan playlists.html yang diperbarui:

<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 pada 5 Jan 2015

Jadi apa yang Anda gambarkan dan markup sebenarnya benar.

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

Apa yang Anda gambarkan disebabkan oleh atribut menu-close.

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

Jadi saat Anda menavigasi melalui menu samping, tautan yang memiliki atribut tutup menu akan menghapus riwayat dan mencegah tombol kembali ditampilkan.

Dalam kasus Anda, Anda menavigasi melalui $state.go , yang tidak memiliki logika yang disediakan menu-close.

Jadi, Anda perlu menambahkannya sedikit.

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

terima kasih @mhartington....
itu menyelesaikan masalah saya ...

foram-patel picture foram-patel pada 7 Sep 2016
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

SebastianGiro picture SebastianGiro  ·  3Komentar
vswarte picture vswarte  ·  3Komentar
Nick-The-Uncharted picture Nick-The-Uncharted  ·  3Komentar
MrBokeh picture MrBokeh  ·  3Komentar
alan-agius4 picture alan-agius4  ·  3Komentar