属性	类型	详情
align-title (可选)	`字符串`	标题对齐的位置。可用: ‘left‘, ‘right‘, or ‘center‘。默认为 ‘center‘。

属性	类型	详情
align-title (可选)	`字符串`	标题对齐的位置。可选: ‘left‘, ‘right‘, 或 ‘center‘。默认为 ‘center‘。

属性	类型	详情
delegate-handle (可选)	`字符串`	该句柄用于标识带有`$ionicScrollDelegate`的滚动视图。
padding (可选)	`布尔值`	是否在内容上添加内填充。在iOS上默认为true，在Android上为false。
scroll (可选)	`布尔值`	是否允许内容滚动。默认为true。
overflow-scroll (可选)	`布尔值`	是否用溢出滚动代替Ionic滚动。
has-bouncing (可选)	`布尔值`	是否允许内容滚动反弹到边缘。iOS上默认为true，Android上默认为false。
on-scroll (可选)	`表达式`	当内容滚动时表现的评估。
on-scroll-complete (可选)	`表达式`	一个滚动动作完成时表现的评估。

属性	类型	详情
on-refresh (可选)	`表达式`	当用户下拉到一定程度然后开始刷新时触发。
on-pulling (可选)	`表达式`	当用户开始下来刷新时触发。
pulling-icon (可选)	`字符串`	当用户下拉时显示的图标。默认: ‘ion-arrow-down-c‘。
pulling-text (可选)	`字符串`	当用户下拉时显示的文字。
refreshing-icon (可选)	`字符串`	用户刷新后显示的图标。
refreshing-text (可选)	`字符串`	用户刷新后显示的文字。

属性	类型	详情
delegate-handle (可选)	`字符串`	该句柄利用`$ionicScrollDelegate`指定滚动视图。
direction (可选)	`字符串`	滚动的方向。 ‘x‘ 或 ‘y‘。默认 ‘y‘。
paging (可选)	`布尔值`	分页是否滚动。
on-refresh (可选)	`表达式`	调用下拉刷新，由`ionRefresher`触发。
on-scroll (可选)	`表达式`	当用户滚动时触发。
scrollbar-x (可选)	`布尔值`	是否显示水平滚动条。默认为false。
scrollbar-y (可选)	`布尔值`	是否显示垂直滚动条。默认为true。
zooming (可选)	`布尔值`	是否支持双指缩放。
min-zoom (可选)	`整数`	允许的最小缩放量（默认为0.5）
max-zoom (可选)	`整数`	允许的最大缩放量（默认为3）

属性	类型	详情
on-infinite	`表达式`	当滚动到底部时触发的时间。
distance (可选)	`字符串`	从底部滚动到触发on-infinite表达式的距离。默认: 1%。
icon (可选)	`字符串`	当加载时显示的图标。默认: ‘ion-loading-d‘。

参数	类型	详情
shouldAnimate (可选)	`布尔值`	是否应用滚动动画。

参数	类型	详情
shouldAnimate (可选)	`布尔值`	是否应用滚动动画。

参数	类型	详情
left	`数值`	水平滚动的值。
top	`数值`	垂直滚动的值。
shouldAnimate (可选)	`布尔值`	是否应用滚动动画。

参数	类型	详情
left	`数值`	水平滚动的偏移量。
top	`数值`	垂直滚动的偏移量。
shouldAnimate (可选)	`布尔值`	是否应用滚动动画。

参数	类型	详情
shouldAnimate (可选)	`布尔值`	是否应用滚动动画。

参数	类型	详情
id	`字符串`	保留已滚动位置的滚动视图的id。

参数	类型	详情
shouldAnimate (可选)	`布尔值`	是否应用滚动动画。

属性	类型	详情
delegate-handle (可选)	`字符串`	该句柄用`$ionicTabsDelegate`来标识这些选项卡。

属性	类型	详情
title	`字符串`	选项卡的标题。
href (可选)	`字符串`	但触碰的时候，该选项卡将会跳转的的链接。
icon (可选)	`字符串`	选项卡的图标。如果给定值，它将成为ion-on和ion-off的默认值。
icon-on (可选)	`字符串`	被选中标签的图标。
icon-off (可选)	`字符串`	没被选中标签的图标。
badge (可选)	`表达式`	选项卡上的徽章（通常是一个数字）。
badge-style (可选)	`表达式`	选项卡上微章的样式（例，tabs-positive ）。
on-select (可选)	`表达式`	选项卡被选中时触发。
on-deselect (可选)	`表达式`	选项卡取消选中时触发。
ng-click (可选)	`表达式`	通常，点击时选项卡会被选中。如果设置了 ng-Click，它将不会被选中。你可以用$ionicTabsDelegate.select()来指定切换标签。

参数	类型	详情
index	`数值`	选择标签的索引。
shouldChangeHistory (可选)	`布尔值`	此选项是否应该加载这个标签的浏览历史（如果存在），并使用，或仅加载默认页面。默认为false。提示：如果一个`ionNavView`在选项卡里，你可能需要设置它为true。

属性	类型	详情
delegate-handle (可选)	`字符串`	该句柄用来标识带有`$ionicSideMenuDelegate`的侧栏菜单。

属性	类型	详情
drag-content (可选)	`布尔值`	内容是否可被拖动。默认为true。

属性	类型	详情
side	`字符串`	侧栏菜单当前在哪一边。可选的值有: ‘left‘ 或 ‘right‘。
is-enabled (可选)	`布尔值`	该侧栏菜单是否可用。
width (可选)	`数值`	侧栏菜单应该有多少像素的宽度。默认为275。

menu-close

关闭当前打开的侧栏菜单。

用法

下面是一个侧栏菜单内链接的例子。点击这个链接会自动关闭当前打开的菜单。

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

$ionicSideMenuDelegate

授权控制ionSideMenus指令。

该方法直接触发$ionicSideMenuDelegate服务，来控制所有侧栏菜单。用$getByHandle方法控制特定情况下的ionSideMenus。

用法

<body ng-controller="MainCtrl">
  <ion-side-menus>
    <ion-side-menu-content>
      内容!
      <button ng-click="toggleLeftSideMenu()">
        切换左侧侧栏菜单
      </button>
    </ion-side-menu-content>
    <ion-side-menu side="left">
      左侧菜单!
    <ion-side-menu>
  </ion-side-menus>
</body>
function MainCtrl($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

方法

`toggleLeft([isOpen])`

切换左侧侧栏菜单（如果存在）。

参数	类型	详情
isOpen (可选)	`布尔值`	是否打开或关闭菜单。默认：切换菜单。

`toggleRight([isOpen])`

切换右侧侧栏菜单（如果存在）。

参数	类型	详情
isOpen (可选)	`布尔值`	是否打开或关闭菜单。默认：切换菜单。

`getOpenRatio()`

获取打开菜单内容超出菜单宽度的比例。比如，一个宽度为100px的菜单被宽度为50px以50%的比例打开，将会返回一个比例值为0.5。

返回: 浮点 0 表示没被打开，如果左侧菜单处于已打开或正在打开为0 到 1，如果右侧菜单处于已打开或正在打开为0 到-1。

`isOpen()`

返回: 布尔值无论左侧或右侧菜单是否已经打开。

`isOpenLeft()`

返回: 布尔值左侧菜单是否已经打开。

`isOpenRight()`

返回: 布尔值右侧菜单是否已经打开。

`canDragContent([canDrag])`

参数	类型	详情
canDrag (可选)	`布尔值`	设置是否可以拖动内容打开侧栏菜单。

返回: 布尔值是否可以拖动内容打开侧栏菜单。

`$getByHandle(handle)`

参数	类型	详情
handle	`字符串`

返回: delegateInstance一个代表性的实例是用delegate-handle只控制ionSideMenus指令来匹配指定的句柄。

例如: $ionicSideMenuDelegate.$getByHandle(‘my-handle‘).toggleLeft();

ion-nav-view

See the Pen by Ionic (@ionic) on CodePen.

当用户在你的app中浏览时，Ionic能够保持检测他们的浏览历史。通过了解他们的浏览历史，向左或向右滑动时可以正确的在视图间转换，或不转换。一个额外的好处是Ionic的导航系统具有可以管理多个历史记录的能力。

Ionic利用AngularUI路由模块，使应用程序接口可以组织成不同的“状态”。例如Angular的核心$route服务，利用URL控制视图。然而，AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套，以及合并视图，允许一个以上模板呈现在同一个页面。此外，每个状态无需绑定到一个URL，并且数据可以更灵活地推送到每个状态。

用ionNavView指令在你的app中渲染模版。每个模板都是状态的一部分。状态通常映射到一个url上，然后用angular-ui-router定义程序（查看它们的文档，记下用ion-nav-view替换ui-view的例子）。

用法

在这个例子中，我们将创建一个应用程序中包含不同状态的导航视图。

要做到这一点，在我们的标签中，用ionNavView顶层指令。要显示一个页眉，我们利用，当我们通过导航堆栈导航时，就会用ionNavBar指令更新。

你可以在navView的动画属性上应用任何动画类来给它添加页面动画。

建议的页面过渡： ‘slide-left-right‘, ‘slide-left-right-ios7‘, ‘slide-in-up‘。

<ion-nav-bar></ion-nav-bar>
<ion-nav-view animation="slide-left-right">
  <!-- 中间内容 -->
</ion-nav-view>

接下来，我们需要设置被渲染的状态。

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

然后在app启动时，$stateProvider就会检查url，检查它的索引匹配状态，然后尝试将home.html加载到<ion-nav-view>内。

页面由指定的URL加载。在Angular中有一个简单的方式就是把它们直接放到你的HTML文件，并用<script type="text/ng-template">语法。因此，这是一种把home.html载入到app中的一种方式:

<script id="home" type="text/ng-template">
  <!-- ion-view的标题会在导航栏显示 -->
  <ion-view title="‘Home‘">
    <ion-content ng-controller="HomeCtrl">
      <!-- 页面的内容 -->
      <a href="#/music">跳转到音乐页面！!</a>
    </ion-content>
  </ion-view>
</script>

这么做那也是极好的，因为缓存了模板，加载速度非常快，不必从网络上再获取。

请访问AngularUI 路由文档了解详情。下面是一个很棒的AngularUI路由视频，可以帮助了解它的所有运作情况：

API

属性	类型	详情
name (可选)	`字符串`	一个视图的名字。这个名字应该是在相同的状态下其他视图中唯一的。你可以在不同的状态中有相同名称的视图。欲了解详细信息，查看ui-router的 ui-view 文档。

属性	类型	详情
delegate-handle (可选)	`字符串`	该句柄用`$ionicSlideBoxDelegate`来标识这个滑动框。
does-continue (可选)	`布尔值`	滑动框是否自动滑动。
slide-interval (可选)	`数字`	等待多少毫秒开始滑动（如果继续则为true）。默认为4000。
show-pager (可选)	`布尔值`	滑动框的页面是否显示。
pager-click (可选)	`表达式`	当点击页面时，触发该表达式（如果shou-pager为true）。传递一个‘索引‘变量。
on-slide-changed (可选)	`表达式`	当滑动时，触发该表达式。传递一个‘索引‘变量。
active-slide (可选)	`表达式`	将模型绑定到当前滑动框。

参数	类型	详情
to	`数字`	滑动的索引。
speed (可选)	`数字`	滑动切换的毫秒数。

参数	类型	详情
templateString	`字符串`	模板的字符串作为模型的内容。
options	`对象`	传递ionicModal#initialize方法的选项。

参数	类型	详情
callback	`function`	当点击返回按钮时触发，如果该监视器具有最高的优先级。
priority	`number`	仅最高优先级的会执行。
actionId (可选)	`*`	该id指定这个动作。默认：一个随机且唯一的id。

参数	类型	详情
eventType	`string`	监听的手势事件。
callback	`function(e)`	当手势事件发生时触发的事件。
$element	`element`	angular元素监听的事件。

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

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

属性	类型	详情
delegate-handle (可选)	`字符串`	该句柄定义带有`$ionicListDelegate`的列表。
show-delete (可选)	`布尔值`	列表项的删除按钮当前是显示还是隐藏。
show-reorder (可选)	`布尔值`	列表项的排序按钮当前是显示还是隐藏。
can-swipe (可选)	`布尔值`	列表项是否被允许滑动显示选项按钮。默认：true。

参数	类型	详情
templateUrl	`字符串`	载入模板的url。
options	`对象`	通过ionicModal#initialize方法传递对象。

参数	类型	详情
eventType	`string`	移除监听的手势事件。
callback	`function(e)`	移除监听器。
$element	`element`	被监听事件的angular元素。

参数	类型	详情
showFullScreen (可选)	`boolean`	是否设置app全屏。默认为true。
showStatusBar (可选)	`boolean`	是否显示设备状态栏。默认为false。

参数	类型	详情
element	`DOMElement`	找到索引的元素。
type	`string`	与子元素对应的节点名称。

参数	类型	详情
eventType	`string`	触发的事件。
data	`object`	事件的数据。提示：通过`{target: targetElement}`传递。
bubbles (可选)	`boolean`	事件是否在DOM中冒泡。
cancelable (可选)	`boolean`	事件是否能被取消。

参数	类型	详情
type	`string`	监听的事件。
callback	`function`	触发监听器。
element	`DOMElement`	监听该事件的元素。

参数	类型	详情
eventType	`string`	手势事件
callback	`function(e)`	之前添加的监听器。
element	`DOMElement`	被监听的元素。

ionic基础知识

ion-header-bar（头部 页眉）

用法

bar-subheader

API

ion-footer-bar （页脚 底部）

用法

API

ion-content 授权: $ionicScrollDelegate（授权控制滚动视图）

用法

API

ion-refresher 隶属于ionContent 或 ionScroll

用法

API

ion-pane

用法

ion-scroll 授权: $ionicScrollDelegate（授权控制滚动视图）

用法

API

ion-infinite-scroll 隶属于ionContent 或 ionScroll

用法

API

$ionicScrollDelegate（通过ionContent 和 ionScroll指令创建）

用法

方法

resize()

scrollTop([shouldAnimate])

scrollBottom([shouldAnimate])

scrollTo(left, top, [shouldAnimate])

scrollBy(left, top, [shouldAnimate])

getScrollPosition()

anchorScroll([shouldAnimate])

getScrollView()

rememberScrollPosition(id)

forgetScrollPosition()

scrollToRememberedPosition([shouldAnimate])

$getByHandle(handle)

ion-tabs 授权: $ionicTabsDelegate

用法

API

ion-tab 隶属于ionTabs

用法

API

$ionicTabsDelegate

用法

方法

select(index, [shouldChangeHistory])

selectedIndex()

$getByHandle(handle)

ion-side-menus 授权: $ionicSideMenuDelegate

用法

API

ion-side-menu-content 隶属于ionSideMenus

用法

API

ion-side-menu 隶属于 ionSideMenus

用法

API

menu-toggle

用法

menu-close

用法

$ionicSideMenuDelegate

用法

方法

toggleLeft([isOpen])

toggleRight([isOpen])

getOpenRatio()

isOpen()

isOpenLeft()

isOpenRight()

canDragContent([canDrag])

$getByHandle(handle)

ion-nav-view

用法

API

ion-view 隶属于ionNavView

用法

API

ion-nav-bar 授权: $ionicNavBarDelegate

ion-header-bar（头部页眉）

ion-footer-bar （页脚底部）

ion-content
授权: `$ionicScrollDelegate（授权控制滚动视图）`

ion-refresher
隶属于`ionContent` 或 `ionScroll`

ion-scroll
授权: `$ionicScrollDelegate（授权控制滚动视图）`

ion-infinite-scroll
隶属于`ionContent` 或 `ionScroll`

$ionicScrollDelegate（通过`ionContent` 和 `ionScroll`指令创建）

`resize()`

`scrollTop([shouldAnimate])`

`scrollBottom([shouldAnimate])`

`scrollTo(left, top, [shouldAnimate])`

`scrollBy(left, top, [shouldAnimate])`

`getScrollPosition()`

`anchorScroll([shouldAnimate])`

`getScrollView()`

`rememberScrollPosition(id)`

`forgetScrollPosition()`

`scrollToRememberedPosition([shouldAnimate])`

`$getByHandle(handle)`

ion-tabs
授权: `$ionicTabsDelegate`

ion-tab
隶属于`ionTabs`

`select(index, [shouldChangeHistory])`

`selectedIndex()`

`$getByHandle(handle)`

ion-side-menus
授权: `$ionicSideMenuDelegate`

ion-side-menu-content
隶属于`ionSideMenus`

ion-side-menu
隶属于 `ionSideMenus`

`toggleLeft([isOpen])`

`toggleRight([isOpen])`

`getOpenRatio()`

`isOpen()`

`isOpenLeft()`

`isOpenRight()`

`canDragContent([canDrag])`

`$getByHandle(handle)`

ion-view
隶属于`ionNavView`

ion-nav-bar
授权: `$ionicNavBarDelegate`

ion-nav-buttons
隶属于`ionNavView`

ion-nav-back-button
隶属于`ionNavBar`

`back([event])`

`align([direction])`

`showBackButton([show])`

`showBar(show)`

`setTitle(title)`

`changeTitle(title, direction)`

`getTitle()`

`getPreviousTitle()`

`$getByHandle(handle)`

ion-list
授权: `$ionicListDelegate`

ion-item
隶属于`ionList`

ion-delete-button
隶属于`ionItem`

ion-reorder-button
隶属于`ionItem`

ion-option-button
隶属于`ionItem`

`showReorder([showReorder])`

`showDelete([showReorder])`

`canSwipeItems([showReorder])`

`closeOptionButtons()`

`$getByHandle(handle)`

ion-slide-box
授权: `$ionicSlideBoxDelegate`

`update()`

`slide(to, [speed])`

`enableSlide([shouldEnable])`

`previous()`

`next()`

`stop()`

`currentIndex()`

`slidesCount()`

`$getByHandle(handle)`