navigasi ionik

ion-nav-view

Ketika pengguna browse ke aplikasi Anda ketika, ion mampu mendeteksi riwayat browsing. Dengan mendeteksi riwayat browsing, geser ke kiri atau kanan untuk mencapai ketika benar dikonversi views.

Menggunakan modul router AngularUI interface dan aplikasi lainnya dapat dibagi menjadi $ negara yang berbeda (negara). inti sudut untuk layanan Routing, URL dapat digunakan untuk mengontrol tampilan.

rute AngularUI menyediakan manajemen negara yang lebih kuat, negara yang bisa diberi nama, bersarang, dan merger pandang, untuk memungkinkan lebih dari satu template yang disajikan pada halaman yang sama.

Selain itu, setiap negara tidak perlu terikat ke URL, dan data dapat lebih fleksibel untuk mendorong setiap negara.

Contoh berikut, kita akan membuat tampilan menu aplikasi berisi negara-negara yang berbeda.

pilihan ionNavView tag sebagai perintah atas. Tampilan header kolom kita ionNavBar petunjuk melalui update navigasi.

Selanjutnya, kita perlu mengatur kami membuat nilai negara.

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

Kemudian buka aplikasi, $ stateProvider query url, untuk melihat apakah negara sesuai dengan nilai indeks, dan kemudian memuat index.html ke <ion-nav-view>.

Halaman beban melalui URL dikonfigurasi. Buat template dari cara yang paling sederhana adalah dengan langsung Sudut menempatkan dia di html file template dan menggunakan <script type = "text / ng-template"> berisi.

Jadi ini adalah cara untuk home.html ditambahkan ke APP kami di masa lalu:

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

Coba »

Ini adalah cara yang baik, karena template akan cepat dimuat dan cache berbeda untuk pergi melalui beban jaringan.

caching

Dalam keadaan normal, pandangan cache dapat meningkatkan kinerja. Ketika keluar dari pandangan, elemen-nya dipertahankan di Dom, dan ruang lingkup juga dihapus dari $ menonton.

Ketika kita melompat telah menjadi pandangan cache, pandangan akan diaktifkan, ruang lingkup menghubungkan kembali, Dom juga disimpan elemen nya. Hal ini juga memungkinkan untuk mempertahankan posisi tampilan gulir sebelumnya.

Caching juga dapat banyak cara untuk menghidupkan dan mematikan. Ionik jumlah maksimum default cache halaman adalah 10, dan ini bukan hanya disesuaikan, aplikasi secara eksplisit dapat mengatur tampilan negara tidak harus di-cache.

Perhatikan bahwa karena kita caching pandangan ini, kita tidak menghancurkan ruang lingkup. Sebaliknya, juga dikeluarkan dari lingkup $ menonton.

Karena lingkup pandang berikutnya belum dihancurkan dan dibangun kembali, controller tidak dimuat lagi. Jika aplikasi / controller perlu tahu ketika memasuki atau meninggalkan pandangan, dan kemudian melihat acara dari ionView masalah tindakan, seperti $ ionicView.enter, mungkin berguna.

caching menonaktifkan global

Cache $ IonicConfigProvider dapat digunakan untuk mengatur jumlah maksimum penayangan dengan menetapkan ke 0 untuk menonaktifkan semua cache.

$ionicConfigProvider.views.maxCache(0);

Menonaktifkan caching di NEGARA PROVIDER

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

Menonaktifkan cache melalui properti

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

AngularUI rute

Kunjungi docs AngularUI Router untuk lebih.

API

milik	jenis	Detil
nama (Opsional)	`字符串`	Sebuah nama tampilan. Nama ini harus menjadi satu-satunya pandangan lain di negara yang sama. Anda dapat memiliki pandangan dengan nama yang sama di negara yang berbeda. Untuk informasi lebih lanjut, melihat ui-router ui-tampilan dokumen .

ion-view

Berafiliasi ionNavView. Isi wadah untuk tampilan layar atau informasi navigasi.

Berikut ini adalah menu bar dengan "Halaman Saya" menuju untuk memuat halaman contoh.

<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

milik	jenis	Detil
judul (Opsional)	`字符串`	Hal ini ditampilkan dalam induk `ionNavBar` judul.
hide-back-tombol (Opsional)	`布尔值`	Secara default, jika orang tua `ionNavBar` menyembunyikan tombol kembali.
hide-nav-bar (Opsional)	`布尔值`	Secara default, jika Anda menyembunyikan orangtua `ionNavBar` .

ion-nav-bar

Buat toolbar di atas, ketika program update perubahan status.

pemakaian

<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

milik jenis Detil

milik	jenis	Detil
delegasi-handle (Opsional)	`字符串`	Pegangan dengan `$ionicNavBarDelegate` mengidentifikasi bar navigasi.
menyelaraskan-title (Opsional)	`字符串`	title bar navigasi sejajar posisi. Tersedia: 'kiri', 'benar', 'pusat'. Default adalah 'pusat'.

delegasi-handle

(Opsional)

字符串

Pegangan dengan $ionicNavBarDelegate mengidentifikasi bar navigasi.

menyelaraskan-title

(Opsional)

字符串

title bar navigasi sejajar posisi. Tersedia: 'kiri', 'benar', 'pusat'. Default adalah 'pusat'.

ion-nav-tombol

berafiliasi ionNavView

Pada ionNavBar ionView dalam dengan tombol ionNavButtons Settings.

Setiap tombol yang Anda tetapkan akan ditempatkan pada posisi yang tepat dari bar navigasi, ketika pengguna meninggalkan pandangan orang tua akan hancur.

pemakaian

<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

milik	jenis	Detil
sisi	`字符串`	Induk `ionNavBar` penempatan tombol posisi. Tersedia: 'kiri' atau 'kanan'.

ion-nav-back-tombol

Buat tombol di ionNavBar di.

Ketika pengguna dapat menavigasi dalam resesi saat ini, tombol kembali akan ditampilkan.

pemakaian

tindakan tombol Default:

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

Kustom tindakan klik, dengan $ 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();
  };
}

Pada tombol Kembali menampilkan judul sebelumnya, tetapi juga dengan $ 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-jelas

atribut nav-jelas digunakan perintah ketika Anda mengklik pada tampilan elemen saat seperti <a href> atau <button ui-sref>.

Ketika diklik, nav-jelas akan menghasilkan suatu unsur tertentu dilarang di bawah omset dari pandangan. Perintah ini berguna, misalnya, link menu sidebar.

pemakaian

Berikut ini adalah menu sidebar untuk menambahkan link ke nav-jelas instruksi. Mengklik link akan menonaktifkan animasi apapun antara tampilan.

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

ion-nav-title

ion-nav-judul ion-tampilan template digunakan untuk mengatur judul.

pemakaian

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

Mengatur jenis transisi digunakan mungkin: ios, android, dan tidak ada.

pemakaian

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

nav-arah

Set Nav tampilan transisi ke arah animasi, baik maju, kembali, masukkan, keluar, swap.

pemakaian

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

$ IonicNavBarDelegate

kontrol hak ion-nav-bar petunjuk.

pemakaian

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

cara

align([direction])

Kembali dalam sejarah browsing.

parameter	jenis	Detil
peristiwa (Opsional)	`DOMEvent`	objek acara (seperti dari acara klik)

align([direction])

Judul dengan tombol sejajar dengan arah tertentu.

parameter	jenis	Detil
arah (Opsional)	`字符串`	Judul teks arah keselarasan. Tersedia: 'kiri', 'benar', 'pusat'. Default: 'pusat'.

Mengembalikan nilai: nilai kembali Boolean tombol ditampilkan.

showBar(show)

Mendapat atau menetapkan ion-nav-bar akan ditampilkan.

parameter	jenis	Detil
pertunjukan	`布尔值`	Navigasi bar ditampilkan.

Mengembalikan nilai: bar navigasi boolean ditampilkan.

showBackButton([show])

Mendapat atau menetapkan ion-nav-back-tombol ditampilkan.

parameter	jenis	Detil
pertunjukan (Opsional)	`布尔值`	Apakah akan menampilkan tombol kembali

title(title)

Mengatur caption ion-nav-bar.

parameter	jenis	Detil
judul	`字符串`	Menampilkan judul baru.

$ IonicHistory

$ IonicHistory digunakan untuk melacak riwayat browsing pengguna dalam aplikasi.

cara

viewHistory()

Untuk melihat sejarah.

currentView()

Saat pandangan app.

currentHistoryId()

Sejarah ID tumpukan, adalah wadah induk dari tampilan saat ini.

currentTitle([val])

Mendapat atau menetapkan judul tampilan saat.

backView()

Kembali ke tampilan dilihat terakhir.

backTitle()

Dapatkan judul tampilan browsing terakhir.

forwardView()

Kembali melihat pada pandangan sejarah dari tumpukan saat ini.

currentStateName()

Mengembalikan nama negara saat ini.

goBack([backCount])

aplikasi tampilan rollback, jika rollback pandang ada.

Sebelumnya: ionik jendela modal

Berikutnya: Landasan ionik

ionic kuliah

ionic CSS

ionic JavaScript

navigasi ionik

navigasi ionik

ion-nav-view

caching

caching menonaktifkan global

Menonaktifkan caching di NEGARA PROVIDER

Menonaktifkan cache melalui properti

AngularUI rute

API

ion-view

API

ion-nav-bar

pemakaian

API

ion-nav-tombol

pemakaian

API

ion-nav-back-tombol

pemakaian

nav-jelas

pemakaian

ion-nav-title

pemakaian

nav-transisi

pemakaian

nav-arah

pemakaian

$ IonicNavBarDelegate

pemakaian

cara

$ IonicHistory

cara