关于ionic导航

ion-view
隶属于ionNavView

一个内容的容器，用来告诉一个当前视图的父ionNavBar。

API

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

ion-nav-bar
授权: $ionicNavBarDelegate

如果我们有一个ionNavView指令，我们也可以创建一个<ion-nav-bar>，它会创建一个顶部工具栏，当程序状态改变时更新。

我们在里面放入一个ionNavBackButton来添加一个后退按钮。

用 ionNavButtons根据当前可用的视图添加按钮。

API

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

ion-nav-buttons
隶属于ionNavView

在ionView内的ionNavBar上用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

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

ion-nav-back-button
隶属于ionNavBar

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

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

nav-clear

nav-clear一个当点击视图上的元素时用到的属性指令，比如一个 <a href> 或者一个 <button ui-sref>。

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

用法

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

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

$ionicNavBarDelegate

授权控制 ionNavBar指令。

方法

back([event])

在浏览历史中后退。

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

align([direction])

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

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

showBackButton([show])

设置或获取ionNavBackButton是否显示（如果它存在的话）。

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

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

showBar(show)

设置或获取ionNavBar是否显示。

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

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

setTitle(title)

为ionNavBar设置标题。

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

changeTitle(title, direction)

改变标题，指定的一个过渡的方向，显示新标题，隐藏旧标题。

参数	类型	详情
title	字符串	显示新标题。
direction	字符串	过渡显示新标题的方向。可用： 'forward', 'back'。

getTitle()

• 返回: 字符串获取当前导航栏的标题

getPreviousTitle()

• 返回: 字符串 导航栏的上一个标题。

$getByHandle(handle)

参数	类型	详情
handle	字符串

• 返回: delegateInstance 用给定的delegate-handle句柄只控制导航栏的一个授权实例。

例如: $ionicNavBarDelegate.$getByHandle('myHandle').setTitle('newTitle')