Ionic Js十二:導航ion-nav-view


ion-nav-view
當用戶在你的app中瀏覽時,ionic能夠檢測到瀏覽歷史。通過檢測瀏覽歷史,實現向左或向右滑動時可以正確轉換視圖。
采用AngularUI路由器模塊等應用程序接口可以分為不同的$state(狀態)。Angular的核心為路由服務,URLs可以用來控制視圖。
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 狀態值, 再加載index.html到。

頁面加載都是通過URLs配置的。在Angular中創建模板最一個簡單的方式就是直接將他放到html模板文件中並且用<script type="text/ng-template">包含。

所以這也是一種方式將Home.html加入到我們的APP中來:

<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 中移除。
因為接下來的觀看作用域並沒有被摧毀和重建,控制器也沒被再次加載。如果app/controller需要知道什么時候進入或離開一個視圖,再視圖事件從 ionView 作用內發出, 例如 \)ionicView.enter, 可能是有用的。

全局禁用緩存

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

 

ion-view
隸屬於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>

 

<body ng-app="starter">
  <!-- 當我們瀏覽時,導航欄會隨之更新。 -->
  <ion-nav-bar class="bar-positive nav-title-slide-ios7">
  </ion-nav-bar>

  <!-- 初始化時渲染視圖模板 -->
  <ion-nav-view></ion-nav-view>
</body>

 

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

 

<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-clear
nav-clear一個當點擊視圖上的元素時用到的屬性指令,比如一個 或者一個

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

 

ion-nav-title
ion-nav-title 用於設置 ion-view 模板中的標題。
用法

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

 

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

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM