イオンナビゲーション

前：イオンモーダルウィンドウ

次へ：イオンプラットフォーム

イオンナビゲーション

イオン-NAV-ビュー

閲覧履歴を検出するイオンができたときに、ユーザーがアプリを参照するとき。閲覧履歴を検出することにより、左スワイプまたは正しくビューを変換したときに達成するための権利。

使用AngularUIルータモジュールインターフェイスや他のアプリケーションは、異なる$状態（状態）に分けることができます。サービスをルーティングするための角度のコアは、URLが表示を制御するために使用することができます。

AngularUIルートは、その状態がネスト、名前を付けることができ、より強力な状態管理を提供し、ビューの合併は、複数のテンプレートが同じページ上に表示できるようにします。

また、各状態は、URLにバインドする必要はなく、データは、各状態をプッシュする、より柔軟であることができます。

次の例では、我々は、ナビゲーションビューのアプリケーションが異なる状態が含まれています作成されます。

topコマンドのように私たちの選択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を照会して、<イオン-NAV-ビュー>へのindex.htmlをロードします。

構成されたURLを介して、ページがロードされます。最も簡単な方法のテンプレートは直接角度のHTMLテンプレートファイルで彼を入れて、含まれています。<script type = "text / ngのテンプレートを">を使用することです作成します。

だから、これはHome.htmlが過去に我々のアプリに追加する方法は次のとおりです。

<script id="home" type="text/ng-template">
  <!--  ion-view 标题将显示在 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>

»をお試しください

テンプレートはすぐにロードされ、キャッシュがネットワークの負荷を通って行くことが異なっているので、これは、良い方法です。

キャッシング

通常の状況下では、ビューは、パフォーマンスを向上させることができ、キャッシュされています。ビューのうち時、彼の要素がドーム内に保持され、その範囲はまた、$時計から除去されます。

我々は、キャッシュされたビューとなっているジャンプすると、ビューがアクティブになり、その範囲が再接続され、ドムはまた彼の要素を救いました。これはまた、前のビューのスクロール位置を維持することができます。

キャッシングは、オンとオフにする多くの方法することができます。ページキャッシュのイオンデフォルトの最大数は10で、これが唯一のカスタマイズはありませんが、明示的にビューステートを設定することができるアプリケーションはキャッシュされるべきではありません。

我々はこれらのビューをキャッシュしているので、我々はスコープを破壊しないことに注意してください。その代わりに、それはまた、$時計の範囲から除外されます。

次の視聴範囲が破壊され、再構築されていないため、コントローラが再びロードされていません。アプリ/コントローラが入るまたはビューを残して、その後、$ ionicView.enterなどionViewアクション問題からイベントを表示したときに知っておく必要がある場合は、それが有用である可能性があります。

グローバル・キャッシュを無効にします

$ IonicConfigProviderキャッシュは、すべてのキャッシュを無効にするために0に設定することにより、ビューの最大許容数を設定するために使用することができます。

$ionicConfigProvider.views.maxCache(0);

STATEプロバイダー内のキャッシュを無効にします

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

プロパティを使用してキャッシュを無効にします

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

AngularUIルート

訪問AngularUIルータのドキュメントを多くのため。

API

プロパティ	タイプ	詳細
名前（オプション）	`字符串`	ビューの名前。この名前は、同じ状態にある唯一の他のビューでなければなりません。あなたは、異なる状態で同じ名前のビューを持つことができます。詳細については、UI-ルータ表示のUIビューの文書を。

イオンビュー

提携ionNavView。表示ビューまたはナビゲーション情報のコンテナの内容。

ここではサンプルのページをロードするために見出し「マイページ」でナビゲーションバーがあります。

<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`タイトル。
非表示のバックボタン（オプション）	`布尔值`	デフォルトでは、親があれば`ionNavBar` [戻る]ボタンを非表示にします。
非表示ナビゲーションバー（オプション）	`布尔值`	デフォルトでは、親隠す場合`ionNavBar` 。

イオンナビゲーションバー

プログラムは、ステータスの変更を更新すると、上部のツールバーを作成します。

使用法

<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

プロパティタイプ詳細

プロパティ	タイプ	詳細
デリゲートハンドル（オプション）	`字符串`	ハンドル`$ionicNavBarDelegate`ナビゲーションバーを識別します。
ALIGN-タイトル（オプション）	`字符串`	ナビゲーションバーのタイトル位置を整列。利用可能：「右」、「中央」、「左」。デフォルトは「中心」です。

デリゲートハンドル

（オプション）

字符串

ハンドル$ionicNavBarDelegateナビゲーションバーを識別します。

ALIGN-タイトル

（オプション）

字符串

ナビゲーションバーのタイトル位置を整列。利用可能：「右」、「中央」、「左」。デフォルトは「中心」です。

イオン-NAV-ボタン

提携ionNavView

ionNavBar ionView上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`位置ボタンの配置。利用可能：「左」または「右」。

イオン-NAV-バックボタン

でionNavBarのボタンを作成します。

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

使用法

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

<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> 后退
  </ion-nav-back-button>
</ion-nav-bar>

$ ionicNavBarDelegateで、アクションを[カスタム]をクリックします：

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

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

NAVクリア

ときにこのような<aのHREF>または<ボタンUI-SREF>あなたは要素のビューをクリックしたときにNAV-明確な属性は、コマンドを使用しました。

クリックすると、指定された要素になりますNAVクリアビューのターンオーバーの下で禁止されています。このコマンドは便利です、例えば、サイドバーのメニューをリンクします。

使用法

ここで、NAV-クリア命令へのリンクを追加するためのサイドバーのメニューがあります。リンクをクリックすると、ビュー間の任意のアニメーションを無効にします。

<a nav-clear menu-close href="#/home" class="item">首页</a>

イオン-NAV-タイトル

イオンNAVタイトルイオンビューテンプレートは、タイトルを設定するために使用されます。

使用法

<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-移行

IOS、アンドロイド、およびなし：かもしれ使用される遷移タイプを設定します。

使用法

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

NAV-方向

ナビビューのトランジションアニメーションの方向を設定し、いずれかの前進、バック、入力し、終了し、スワップ。

使用法

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

$ IonicNavBarDelegate

エンタイトルメント制御イオンナビゲーションバーの指示。

使用法

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

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

ウェイ

align([direction])

戻る閲覧履歴インチ

パラメータ	タイプ	詳細
イベント（オプション）	`DOMEvent`	（このようなクリックイベントからのような）イベントオブジェクト

align([direction])

指定された方向に整列ボタンが付いたタイトル。

パラメータ	タイプ	詳細
方向（オプション）	`字符串`	タイトルテキストの配置方向。利用可能：「右」、「中央」、「左」。デフォルト：「センター」。

戻り値：ブール値戻るボタンが表示されます。

showBar(show)

イオンナビゲーションバーが表示されている取得または設定します。

パラメータ	タイプ	詳細
ショー	`布尔值`	ナビゲーションバーが表示されます。

戻り値：ブールナビゲーションバーが表示されています。

showBackButton([show])

イオン-NAV-バックボタンが表示されている取得または設定します。

パラメータ	タイプ	詳細
ショー（オプション）	`布尔值`	[戻る]ボタンを表示するかどうか

title(title)

キャプションイオンナビゲーションバーを設定します。

パラメータ	タイプ	詳細
タイトル	`字符串`	新しいタイトルを表示します。

$ IonicHistory

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

ウェイ

viewHistory()

歴史を見るため。

currentView()

アプリの現在のビュー。

currentHistoryId()

履歴スタックIDは、現在のビューの親コンテナです。

currentTitle([val])

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

backView()

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

backTitle()

タイトル最後の閲覧ビューを取得します。

forwardView()

戻る現在のスタックの歴史観に表示します。

currentStateName()

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

goBack([backCount])

アプリのロールバックビュー、ビューのロールバックが存在する場合。

前：イオンモーダルウィンドウ

次へ：イオンプラットフォーム

ionic コース

ionic CSS

ionic JavaScript

イオンナビゲーション

イオンナビゲーション

イオン-NAV-ビュー

キャッシング

グローバル・キャッシュを無効にします

STATEプロバイダー内のキャッシュを無効にします

プロパティを使用してキャッシュを無効にします

AngularUIルート

API

イオンビュー

API

イオンナビゲーションバー

使用法

API

イオン-NAV-ボタン

使用法

API

イオン-NAV-バックボタン

使用法

NAVクリア

使用法

イオン-NAV-タイトル

使用法

NAV-移行

使用法

NAV-方向

使用法

$ IonicNavBarDelegate

使用法

ウェイ

$ IonicHistory

ウェイ