イオンナビゲーション


ion-nav-view

ユーザーがアプリ内を閲覧すると、ionic は閲覧履歴を検出できます。閲覧履歴を検出することで、左右にスワイプした際に正しく表示を切り替えることができます。

AngularUI ルーター モジュールなどのアプリケーション インターフェイスの使用は、さまざまな $state に分割できます。 Angular の中核はルーティング サービスであり、URL を使用してビューを制御できます。

AngularUI ルーティングは、より強力な状態管理を提供します。つまり、状態に名前を付けたり、ビューをネストしたり、結合したりできるため、複数のテンプレートを同じページ上にレンダリングできます。

さらに、各状態を URL に結び付ける必要がなく、より柔軟にデータを各状態にプッシュできます。

次の例では、アプリケーション内のさまざまな状態を含むナビゲーション ビューを作成します。

マークアップの最上位ディレクティブとして ionNavView を選択します。ヘッダー バーを表示するには、ionNavBar ディレクティブを使用してナビゲーション経由で更新します。

次に、レンダリングされる状態値を設定する必要があります。 


var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

アプリケーションを再度開くと、$stateProvider が URL をクエリしてインデックス ステータス値と一致するかどうかを確認し、index.html を <ion-nav-view> にロードします。


ページの読み込みは URL を通じて設定されます。 Angular でテンプレートを作成する最も簡単な方法は、テンプレートを HTML テンプレート ファイルに直接配置し、<script type="text/ng-template"w> でインクルードすることです。


これは、Home.html をアプリに追加する方法でもあります: 

<script id="home" type="text/ng-template">
  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>


ネットワーク経由とは異なり、テンプレートはすぐに読み込まれ、キャッシュされるため、これは良い方法です。もう一度読み込んでください。

キャッシュ


通常、ビューはパフォーマンスを向上させるためにキャッシュされます。ビューから消えると、その要素は DOM に保持され、そのスコープは $watch から削除されます。


キャッシュされたビューにジャンプすると、ビューがアクティブになり、そのエフェクトが再接続され、その要素が Dom に保存されます。これにより、前のビューのスクロール位置を維持することもできます。

キャッシュはさまざまな方法でオンまたはオフにすることもできます。デフォルトでは、Ionic は最大 10 ページをキャッシュしますが、アプリケーションがカスタマイズできるのはこれだけではありません。ビューをキャッシュするかどうかを設定することができます。

これらのビューをキャッシュしているため、ビューを破棄するのではなく、そのビューも $watch から削除されることに注意してください。

後続の表示スコープは破棄および再構築されないため、コントローラーは再度ロードされません。アプリ/コントローラーがビューに入るとき、またはビューから出るときを知る必要がある場合、$ionicView.enter などの ionView 関数内からビュー イベントを発行すると便利な場合があります。

キャッシュをグローバルに無効にする

$ionicConfigProvider を使用して、キャッシュできるビューの最大数を設定できます。これを 0 に設定すると、すべてのキャッシュが無効になります。 

$ionicConfigProvider.views.maxCache(0);

STATE PROVIDER でキャッシュを無効にする

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

プロパティ経由でキャッシュを無効にする

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

AngularUI Router

詳細については、AngularUI Router のドキュメントをご覧ください。

api

PropertiestypeDetailsname
（オプション）
字符串ビューの名前。この名前は、同じ状態の他のビュー間で一意である必要があります。異なる状態で同じ名前のビューを持つことができます。詳細については、ui-router の ui-view ドキ​​ュメントを確認してください。

ion-view

はionNavViewに属します。 ビューまたはナビゲーション バーの情報を表示するために使用されるコンテンツのコンテナー。

以下は、「My Page」というタイトルのページを読み込むナビゲーション バーの例です。 

<ion-nav-bar></ion-nav-bar>
<ion-nav-view class="slide-left-right">
  <ion-view title="我的页面">
    <ion-content>
      你好!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

属性タイプ詳細タイトル
(オプション)
字符串

显示在父ionNavBar的标题。

hide-back-button
(可选)
布尔值

默认情况下，是否在父ionNavBar隐藏后退按钮。

hide-nav-bar
(可选)
布尔值

默认情况下，是否隐藏父ionNavBar。

ion-nav-bar

创建一个顶部工具栏，当程序状态改变时更新。

用法

<body ng-app="starter">
  <!-- 当我们浏览时，导航栏会随之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化时渲染视图模板 -->
  <ion-nav-view></ion-nav-view>
</body>

API

属性类型详情
delegate-handle
(可选)
字符串

该句柄用$ionicNavBarDelegate标识此导航栏。

align-title
(可选)
字符串

导航栏标题对齐的位置。可用： 'left', 'right', 'center'。 默认为 'center'。


ion-nav-buttons

隶属于ionNavView

在ionView内的ionNavBar上用ionNavButtons设置按钮。

你设置的任何按钮都将被放置在导航栏的相应位置，当用户离开父视图时会被销毁。

用法

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="left">
      <button class="button" ng-click="doSomething()">
        我是一个在导航栏左侧的按钮！
      </button>
    </ion-nav-buttons>
    <ion-content>
      这里是一些内容！
    </ion-content>
  </ion-view>
</ion-nav-view>

API

親 ionNavBar 。
属性类型详情
side字符串

在父ionNavBar

🎜🎜hide-back-button🎜🎜(オプション)🎜🎜🎜🎜Boolean🎜🎜🎜親 ionNavBar の戻るボタンをデフォルトで非表示にするかどうか。 🎜🎜🎜🎜🎜hide-nav-bar🎜🎜(オプション)🎜🎜🎜🎜 boolean🎜🎜🎜 親の ionNavBar をデフォルトで非表示にするかどうか。 🎜🎜🎜🎜🎜🎜🎜ion-nav-bar🎜🎜 プログラムのステータスが変化したときに更新される上部のツールバーを作成します。 🎜🎜使用法🎜
<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>
🎜API🎜🎜🎜🎜🎜プロパティ🎜🎜タイプ🎜🎜詳細🎜🎜🎜🎜🎜🎜デリゲートハンドル🎜🎜(オプション)🎜🎜🎜 🎜 🎜🎜🎜🎜このハンドルは $ionicNavBarDelegate < を使用します/code>このナビゲーション バーを識別します。 🎜🎜🎜🎜🎜align-title🎜🎜(オプション)🎜🎜🎜🎜🎜🎜🎜🎜 ナビゲーションバーのタイトルを揃える位置。利用可能:「左」、「右」、「中央」。 デフォルトは「中央」です。 🎜🎜
🎜🎜🎜🎜🎜🎜🎜ion-nav-buttons🎜🎜 ionNavView に所属🎜🎜 ionNavButtons を使用して、ionView 内の ionNavBar にボタンを設定します。 🎜🎜設定したボタンはすべて、ナビゲーション バーの対応する位置に配置され、ユーザーが親ビューから離れると破棄されます。 🎜🎜使用法🎜
<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-clear"
    ng-click="canGoBack && goBack()">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>
🎜API🎜🎜🎜🎜🎜プロパティ🎜🎜タイプ🎜🎜詳細🎜🎜🎜🎜🎜🎜side🎜🎜🎜🎜🎜🎜親ionNavBar 。 利用可能:「左」または「右」。 🎜🎜🎜🎜🎜

ion-nav-back-button

ionNavBar にボタンを作成します。

ユーザーが現在のナビゲーションに戻ることができる場合、戻るボタンが表示されます。

使用法

デフォルトのボタンアクション:

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.goBack = function() {
    $ionicNavBarDelegate.back();
  };
}

カスタムクリックアクション、$ionicNavBarDelegate:

<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-icon">
    <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
  </ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.getPreviousTitle = function() {
    return $ionicNavBarDelegate.getPreviousTitle();
  };
}

戻るボタンに前のタイトルを表示するには、$ionicNavBarDelegate も使用します。 

<a nav-clear menu-close href="#/home" class="item">首页</a>
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-title>
      <img src="logo.svg">
    </ion-nav-title>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

nav-clear

nav-clear は、<a href> や <button ui-sref> など、ビュー上の要素をクリックするときに使用される属性ディレクティブです。

クリックすると、nav-clear により、指定された要素が次のビューの遷移を無効にします。このコマンドは、サイドバー メニュー内のリンクなどに便利です。

使い方

以下は、サイドバーメニューに追加された nav-clear コマンドのリンクです。このリンクをクリックすると、ビュー間のアニメーションが無効になります。 

<a nav-transition="none" href="#/home">Home</a>

ion-nav-title

ion-nav-title は、ion-view テンプレートにタイトルを設定するために使用されます。

使用法

<a nav-direction="forward" href="#/home">Home</a>

nav-transition

使用する遷移タイプを設定します。ios、android、none のいずれかです。

使用法

<body ng-controller="MyCtrl">
  <ion-nav-bar>
    <button ng-click="setNavTitle('banana')">
      Set title to banana!
    </button>
  </ion-nav-bar>
</body>

nav-direction

ナビゲーション ビューでの遷移アニメーションの方向を設定します。これには、前方、後方、開始、終了、交換が可能です。

使用法

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.setNavTitle = function(title) {
    $ionicNavBarDelegate.title(title);
  }
}

$ionicNavBarDelegate

ion-nav-bar コマンドを承認します。

使い方

align([direction])

align([direction])

方法

showBar(show)

閲覧履歴に戻ります。

ParametersTypeDetails
event
(オプション)
DOMEventDOMEvent

事件对象（如来自点击事件）

showBackButton([show])

带有按钮的标题对齐到指定的方向。

参数类型详情
direction
(可选)
字符串

标题文字对齐的方向。可用: 'left', 'right', 'center'。 默认: 'center'。

返回值: 布尔值， 后退按钮是否显示。

title(title)

设置或获取 ion-nav-bar 是否显示。

参数类型详情
show布尔值

导航栏是否显示。

返回值: 布尔值， 导航栏是否显示。

viewHistory()

设置或获取 ion-nav-back-button  是否显示。

currentView()
参数类型详情
show
(可选)
布尔值Eventオブジェクト(クリックイベントから)

指定した方向にボタンを揃えたタイトル。 🎜🎜🎜🎜🎜パラメータ🎜🎜タイプ🎜🎜詳細🎜🎜🎜🎜🎜🎜direction🎜🎜(オプション)🎜🎜🎜🎜String🎜🎜🎜タイトルテキストの方向揃っています。利用可能:「左」、「右」、「中央」。 デフォルト:「中央」。 🎜🎜🎜🎜🎜🎜戻り値: 戻るボタンが表示されるかどうかのブール値。 🎜
currentHistoryId()
🎜 ion-nav-bar を表示するかどうかを設定または取得します。 🎜🎜🎜🎜🎜パラメータ🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜show🎜🎜Boolean🎜🎜🎜ナビゲーションバーが表示されるかどうか。 🎜🎜🎜🎜🎜🎜戻り値: ナビゲーション バーが表示されるかどうかのブール値。 🎜
currentTitle([val])
🎜 ion-nav-back-button を表示するかどうかを設定または取得します。 🎜🎜🎜🎜🎜パラメータ🎜🎜タイプ🎜🎜詳細🎜🎜🎜🎜🎜🎜show🎜🎜(オプション)🎜🎜🎜🎜Boolean🎜🎜🎜戻るボタンを表示するかどうか🎜🎜🎜🎜🎜
backView()

ion-nav-bar のタイトルを設定します。

パラメータtype詳細
title字符串

新しいタイトルを表示します。

$ionicHistory

$ionicHistoryは、アプリ内でのユーザーの閲覧履歴を追跡するために使用されます。

メソッド

backTitle()

は履歴を表示するために使用されます。 

forwardView()

アプリの現在のビュー。 

currentStateName()
現在のビューの親コンテナーである履歴スタックの ID。 


goBack([backCount])

現在のビューのタイトルを取得または設定します。

rrreee

最後に表示したビューに戻ります。

rrreee

最後に表示したビューのタイトルを取得します。

rrreee

履歴スタック内の現在のビューの前のビューを返します。

rrreee

現在の状態名を返します。

rrreee

app フォールバック ビュー (フォールバック ビューが存在する場合)。