ionische Navigation

Ion-nav-Ansicht

Wenn Benutzer, wenn sie Ihre Anwendung zu sehen, ionische Lage Browserverlauf zu erkennen. Durch den Browserverlauf zu erfassen, streichen Sie nach links oder rechts zu erreichen, wenn sie richtig Ansichten umgewandelt.

Mit AngularUI Router-Modul Schnittstellen und andere Anwendungen können in verschiedene $ Zustand (state) unterteilt werden. Angular Kern für Dienste Routing kann URLs verwendet werden, um die Ansicht zu steuern.

AngularUI Route bietet einen leistungsfähigeren Zustand Management, kann dieser Zustand genannt werden, verschachtelt, und die Verschmelzung der Ansicht, auf der gleichen Seite mehr als eine Vorlage präsentiert zu ermöglichen.

Darüber hinaus brauchen jeder Staat nicht an eine URL gebunden zu sein, und die Daten können flexibler sein, damit jeder Staat zu schieben.

Im folgenden Beispiel werden wir eine Navigationsansicht Anwendung enthält verschiedene Zustände erstellen.

Unsere Auswahl ionNavView Tag als Top-Befehl. Zeigen Sie einen Spaltenkopf wir ionNavBar Anweisungen über das Navigations Update.

Als nächstes müssen wir Zustandswert unsere machen einzustellen.

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

Dann öffnen Sie die Anwendung, $ stateProvider URL abfragt, um zu sehen, ob der Staat den Indexwert übereinstimmt, und dann laden Sie die index.html <ion-nav-Ansicht>.

Die Seite lädt URLs konfiguriert. Erstellen Sie eine Vorlage der einfachste Weg ist direkt Angular ihm in der HTML-Template-Datei setzen und verwenden <script type = "text / ng-template"> enthält.

So ist dies ein Weg, um Home.html unserer APP in der Vergangenheit hinzugefügt:

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

Versuchen »

Dies ist ein guter Weg, weil die Vorlage schnell geladen wird und der Cache unterscheidet sich durch die Netzlast zu gehen.

Caching

Unter normalen Umständen sind Ansichten im Cache Performance verbessern können. Wenn aus der Ansicht, sein Element im Dom gehalten wird, und ihr Umfang auch von der $ Uhr entfernt wird.

Wenn wir gewesen springen eine im Cache gespeicherte Ansicht wird die Ansicht aktiviert werden, wird ihr Umfang wieder angeschlossen, Dom gerettet auch seinem Element. Dies ermöglicht auch die vorherige Ansicht Scroll-Position zu halten.

Caching kann auch viele Möglichkeiten, um ein- und ausgeschaltet werden. Ionic Standard maximale Anzahl von Seiten-Cache 10 ist, und das ist nicht der einzige kundengerecht, kann die Anwendung explizit die Ansicht Zustand gesetzt sollte nicht zwischengespeichert werden.

Beachten Sie, dass, da wir diese Ansichten sind das Caching, wissen wir nicht Umfang zerstören. Stattdessen ist es auch vom Umfang der $ Uhr entfernt.

Weil die nächste Sichtgerät zerstört und nicht wieder aufgebaut worden ist, wird die Steuerung nicht erneut geladen. Wenn die app / Controller wissen müssen beim Betreten oder eine Ansicht zu verlassen, und zeigen Sie dann das Ereignis aus ionView Aktion Frage, wie $ ionicView.enter, kann es nützlich sein.

Globale deaktivieren Caching

$ IonicConfigProvider Cache kann durch das Setzen auf 0 die maximal zulässige Anzahl von Ansichten eingestellt werden alle Caches zu deaktivieren.

$ionicConfigProvider.views.maxCache(0);

Disable Caching in STATE PROVIDER

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

Deaktivieren Sie den Cache über die Eigenschaft

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

AngularUI Route

Besuchen Sie AngularUI Router docs für mehr.

API

Immobilien	Typ	Detail
Name (Optional)	`字符串`	Ein Name der Ansicht. Dieser Name sollte die einzige andere Ansichten im gleichen Zustand sein. Sie können in einem anderen Staat einen Blick auf den gleichen Namen haben. Weitere Informationen finden Sie im ui-Router ui-View - Dokument .

Ionen-view

Affiliated ionNavView. Der Inhalt eines Behälters für Display-Anzeigen oder Navigationsinformationen.

Hier ist eine Navigationsleiste mit "Meine Seite" Überschrift die Beispielseite zu laden.

<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

Immobilien	Typ	Detail
Titel (Optional)	`字符串`	Es wird in der übergeordneten angezeigt `ionNavBar` Titel.
hide-Back-Taste (Optional)	`布尔值`	In der Standardeinstellung , wenn das Mutter `ionNavBar` die Zurück - Taste verbergen.
hide-nav-Bar (Optional)	`布尔值`	In der Standardeinstellung ausblenden , wenn Sie das übergeordnete `ionNavBar` .

Ion-nav-Bar

Erstellen Sie eine Symbolleiste oben, wenn das Programm die Statusänderung aktualisiert.

Verwendung

<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

Immobilien Typ Detail

Immobilien	Typ	Detail
Delegat-Griff (Optional)	`字符串`	Der Griff mit `$ionicNavBarDelegate` identifiziert die Navigationsleiste.
align-Titel (Optional)	`字符串`	Navigationsleiste Titel ausgerichtete Position. Verfügbar: "links", "rechts", "Mitte". Der Standardwert ist "Zentrum".

Delegat-Griff

(Optional)

字符串

Der Griff mit $ionicNavBarDelegate identifiziert die Navigationsleiste.

align-Titel

(Optional)

字符串

Navigationsleiste Titel ausgerichtete Position. Verfügbar: "links", "rechts", "Mitte". Der Standardwert ist "Zentrum".

Ion-nav-Tasten

Affiliated ionNavView

Auf ionNavBar ionView innen mit ionNavButtons Schaltfläche Einstellungen.

Jede Taste, die Sie festgelegt wird in der entsprechenden Position in der Navigationsleiste platziert werden, wenn der Benutzer die übergeordnete Ansicht verlässt, werden vernichtet.

Verwendung

<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

Immobilien	Typ	Detail
Seite	`字符串`	Die Mutter `ionNavBar` Position Taste Platzierung. Verfügbar: "links" oder "rechts".

Ion-nav-Back-Taste

Erstellen Sie eine Schaltfläche in einem ionNavBar in.

Wenn der Benutzer in der aktuellen Rezession navigieren können, wird die Zurück-Taste angezeigt werden.

Verwendung

Schaltfläche Standard Aktion:

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

Benutzerdefinierte Aktion klicken, wird mit $ 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();
  };
}

Auf der Zurück-Taste wird der vorherige Titel, sondern auch mit $ 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-clear

nav-klare Attribute verwendet, um einen Befehl, wenn Sie auf das Element Ansicht klicken, wenn eine solche <a href> oder eine Taste <ui-sref>.

Wenn Sie darauf klicken, nav-clear in einem bestimmten Element führt unter dem Umsatz einer Ansicht verboten. Dieser Befehl ist nützlich, zum Beispiel, verbindet die Sidebar-Menü.

Verwendung

Hier ist ein Sidebar-Menü einen Link zu nav-klare Anweisung hinzuzufügen. den Link klicken, wird jede Animation zwischen den Ansichten zu deaktivieren.

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

Ion-nav-Titel

Ion-nav-Titel wird Ion-View-Vorlage verwendet, um den Titel zu setzen.

Verwendung

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

Stellen Sie die Übergangstyp verwendet werden können: ios, Android und keine.

Verwendung

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

nav-Richtung

Stellen Sie Nav Ansichtsübergangsanimation Richtung, entweder vorwärts, rückwärts, gelangen, verlassen, tauschen.

Verwendung

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

$ IonicNavBarDelegate

Berechtigungskontrolle Ionen nav-Bar Anweisungen.

Verwendung

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

Weg

align([direction])

Zurück im Browser-Verlauf.

Parameter	Typ	Detail
Ereignis (Optional)	`DOMEvent`	Ereignisobjekte (wie zB von einem Click-Ereignis)

align([direction])

Der Titel mit der Tasten auf die angegebene Richtung ausgerichtet.

Parameter	Typ	Detail
Richtung (Optional)	`字符串`	Die Titeltextausrichtung Richtung. Verfügbar: "links", "rechts", "Mitte". Standard: "Zentrum".

Rückgabewert: Boolean Wert zurück Taste angezeigt wird.

showBar(show)

Ruft die Ionen nav-Bar angezeigt wird.

Parameter	Typ	Detail
Show	`布尔值`	Navigationsleiste angezeigt wird.

Rückgabewert: boolean Navigationsleiste angezeigt wird.

showBackButton([show])

Ruft die Ion-nav-Back-Taste angezeigt wird.

Parameter	Typ	Detail
Show (Optional)	`布尔值`	Ob die Zurück-Taste angezeigt werden

title(title)

Legen Sie die Beschriftung Ion-nav-Bar.

Parameter	Typ	Detail
Titel	`字符串`	Zeigen Sie den neuen Titel.

$ IonicHistory

$ IonicHistory verwendet innerhalb der App eines Benutzers Browser-Verlauf zu verfolgen.

Weg

viewHistory()

Denn die Geschichte sehen.

currentView()

Die aktuelle Ansicht der App.

currentHistoryId()

History-Stack-ID, ist der übergeordnete Container der aktuellen Ansicht.

currentTitle([val])

Ruft den Titel der aktuellen Ansicht.

backView()

Zurück zur zuletzt gesehenen Ansicht.

backTitle()

Erhalten Titel letzte Browsing-Ansicht.

forwardView()

Rückansicht auf einen historischen Blick auf den aktuellen Stapel.

currentStateName()

Gibt den aktuellen Status Namen.

goBack([backCount])

App-Rollback-Ansicht, wenn die Rücknahme der Ansicht vorhanden sind.

Zurück: ionische modalen Fenster

Next: ionische Platform

ionic Kurs

ionic CSS

ionic JavaScript

ionische Navigation

ionische Navigation

Ion-nav-Ansicht

Caching

Globale deaktivieren Caching

Disable Caching in STATE PROVIDER

Deaktivieren Sie den Cache über die Eigenschaft

AngularUI Route

API

Ionen-view

API

Ion-nav-Bar

Verwendung

API

Ion-nav-Tasten

Verwendung

API

Ion-nav-Back-Taste

Verwendung

nav-clear

Verwendung

Ion-nav-Titel

Verwendung

nav-Übergang

Verwendung

nav-Richtung

Verwendung

$ IonicNavBarDelegate

Verwendung

Weg

$ IonicHistory

Weg