ionic 导航

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模板文件中并且用

这是一个很好的方法，因为模板会很快的加载并被缓存就不同通过网络再去加载。

缓存

通常情况下，视图都被缓存了能提升性能。当跳出视图时，他的元素被保留在Dom中，并且它的作用域也从 $watch 中移除。

当我们跳到一个已经被缓存了的视图，视图会被激活，它的作用域被重新连接上，Dom中也保存了他的元素。这也允许保持以前的视图滚动位置。

缓存也可以通过很多方式来开启和关闭的。默认Ionic将最大缓存页面数为10个，并且这并不是唯一可以定制的，应用程序可以显式状态来设置视图应不应该被缓存。

注意，因为我们是缓存这些视图，我们没有破坏作用域。相反, 它的作用域也从 $watch 中移除。

这是因为接下来视图的 watcher 作用域并不会被销毁后再重建，控制器同样也不会重新加载。也正因如此，如果 app/controller 需要感知用户是在什么时候进入或离开某个视图，就可以借助从 ionView 作用域发出的视图事件，比如 $ionicView.enter，这通常会很有帮助。

全局禁用缓存

$ionicConfigProvider 可以用于设置最大允许缓存的视图数量，通过设置为0来禁用所有缓存。

$ionicConfigProvider.views.maxCache(0);

在STATE PROVIDER中禁用缓存

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

通过属性禁用缓存

  ...

AngularUI 路由

请访问 AngularUI Router's docs 了解更多。

API

属性	类型	详情
name (可选)	字符串	这里指的是某个视图的名称。通常来说，在同一状态下，这个名称需要和其他视图区分开来，也就是保持唯一；不过如果状态不同，使用相同的视图名称是没问题的。想进一步了解的话，可以查看ui-router的 ui-view 文档。

ion-view

隶属于ionNavView。 一个内容的容器，用于展示视图或导航栏信息。

下面是一个带有"我的页面"标题的导航栏载入页面的例子。

  
    
      你好!
    
  

API

属性	类型	详情
title (可选)	字符串	显示在父ionNavBar的标题。
hide-back-button (可选)	布尔值	默认情况下，是否在父ionNavBar隐藏后退按钮。
hide-nav-bar (可选)	布尔值	默认情况下，是否隐藏父ionNavBar。

ion-nav-bar

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

用法

API

属性	类型	详情
delegate-handle (可选)	字符串	该句柄用$ionicNavBarDelegate标识此导航栏。
align-title (可选)	字符串	导航栏标题对齐的位置。可用： 'left', 'right', 'center'。 默认为 'center'。

ion-nav-buttons

隶属于ionNavView

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

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

用法

  
    
      
        我是一个在导航栏左侧的按钮！
      
    
    
      这里是一些内容！
    
  

API

属性	类型	详情
side	字符串	在父ionNavBar中按钮放置的位置。 可用: 'left' 或 'right'。

ion-nav-back-button

在一个ionNavBar中创建一个按钮。

当用户在当前导航能够后退时，将显示后退按钮。

用法

默认按钮动作:

  
     后退
  

自定义点击动作，用 $ionicNavBarDelegate:

  
     后退
  

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

在后退按钮上显示上一个标题，也用$ionicNavBarDelegate。

  
    {{getPreviousTitle() || 'Back'}}
  

function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.getPreviousTitle = function() {
    return $ionicNavBarDelegate.getPreviousTitle();
  };
}

nav-clear

nav-clear一个当点击视图上的元素时用到的属性指令，比如一个 或者一个 。

当点击时，nav-clear将会导致给定的元素，禁止下一个视图的转换。这个指令很有用，比如，侧栏菜单内的链接。

用法

下面是一个侧栏菜单内添加了nav-clear指令的一个链接。点击该链接将禁用视图间的任何动画。

首页

ion-nav-title

ion-nav-title 用于设置 ion-view 模板中的标题。

用法

  
    
      
    
    
      Some super content here!
    
  

nav-transition

设置使用的过渡类型，可以是：ios, android, 和 none。

用法

Home

nav-direction

设置导航视图中过渡动画的方向，可以是forward, back, enter, exit, swap。

用法

Home

$ionicNavBarDelegate

授权控制 ion-nav-bar 指令。

用法

Set title to banana!

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

方法

align([direction])

在浏览历史中后退。

参数	类型	详情
event (可选)	DOMEvent	事件对象（如来自点击事件）

align([direction])

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

参数	类型	详情
direction (可选)	字符串	标题文字对齐的方向。可用: 'left', 'right', 'center'。 默认: 'center'。

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

showBar(show)

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

参数	类型	详情
show	布尔值	导航栏是否显示。

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

showBackButton([show])

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

参数	类型	详情
show (可选)	布尔值	是否显示后退按钮

title(title)

为ion-nav-bar设置标题。

参数	类型	详情
title	字符串	显示新标题。

$ionicHistory

$ionicHistory 用于跟踪用户在 app 内的浏览记录。

方法

viewHistory()

用于查看历史记录。

currentView()

app 的当前视图。

currentHistoryId()

历史堆栈的 ID，是当前视图的父类容器。

currentTitle([val])

获取或设置当前视图的标题。

backView()

返回上次浏览的视图。

backTitle()

获取上次浏览的视图的标题。

forwardView()

返回历史堆栈中当前视图的上一个视图。

currentStateName()

返回当前状态名。

goBack([backCount])

app 回退视图，如果回退的视图存在。