Ionic-framework: サイドメニューテンプレート、ion-nav-back-button、ion-navicon、$ state.go（ '/ app / playlists'）;

作成日 2015年01月04日 · 3コメント · ソース: ionic-team/ionic-framework

サイドメニューテンプレートには、app.jsで定義されたいくつかのネストされた状態があります。ネストされた状態（「app.single」など）に移動すると、ion-nav-barが「<戻る」ボタンで更新されます。

「ホームページ」（「/ app / playlists」）に戻ると、戻るボタンがイオンナビゲーターに置き換えられます（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（）関数を呼び出しますが、戻るボタンはイオンナビゲーターに置き換えられていませんか？

これは、あるビューから別のビューに移動してから「ホームページ」に戻る場合にも当てはまります。

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が必要です）

ソース

RobFerguson

最も参考になるコメント

つまり、あなたが説明していることとマークアップは実際には正しいのです。

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

あなたが説明していることは、menu-close属性が原因です。

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

したがって、サイドメニューからナビゲートすると、メニューを閉じる属性を持つリンクによって履歴がクリアされ、戻るボタンが表示されなくなります。

あなたの場合、 $state.goを介してナビゲートしていますが、これにはmenu-closeが提供するロジックがありません。

したがって、それに少し追加する必要があります。

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};

mhartington 2015年02月18日

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

イオン-NAV-ボタンは、イオン-NAV-表示できないイオンナビゲーションバーの直系の子孫でなければなりません。

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 2015年01月05日

つまり、あなたが説明していることとマークアップは実際には正しいのです。

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

あなたが説明していることは、menu-close属性が原因です。

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

あなたの場合、 $state.goを介してナビゲートしていますが、これにはmenu-closeが提供するロジックがありません。

したがって、それに少し追加する必要があります。

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};

mhartington 2015年02月18日

👍6

ありがとう@mhartington...。
それは私の問題を解決しました...

foram-patel 2016年09月07日

このページは役に立ちましたか？

0 / 5 - 0 評価

Ionic-framework: サイドメニューテンプレート、ion-nav-back-button、ion-navicon、$ state.go（ '/ app / playlists'）;

最も参考になるコメント

全てのコメント3件

関連する問題