十五、ionic路由
1、ionic中内联模板介绍
使用内联模板
内联模板的使用，常见的有几种情况。
（1） 使用ng-include指令
可以利用ng-include指令在HTML中直接使用内联模板，例如： <div ng-include="'a.html'"></div> 注意：其中a.html是一个字符串常量，需要使用单引号包裹起来。
（2）使用$templateCache服务
也可以直接使用$templateCache服务的方法get()从模板缓存中读出 其内容：
var partial = $templateCache.get("a.html");
（3）使用$http服务
还有一种常见的用法是使用$http服务时指定cache参数，这将直接从$templateCache 中取出模板，而不必进行网络访问： $http.get("a.html",{cache:$templateCache}) .success(function(d,s){..}) .error(function(d,s){...});
（4）配置状态机
需要指出的是，状态的划分以及每个状态的元信息（比如模板、url等）是在配置 阶段通过$stateProvider完成的：
angular.module("myApp",["ionic"]) .config(
function($stateProvider){
$stateProvider.state("state1",{...})
.state("state2",{...})
.state3("state3",{...});
});
触发状态迁移的几种方式（通俗的讲就是页面跳转的几种方式）
a. 调用$state.go()方法，这是一个高级的便利方法；
b. 点击包含ui-sref指令的链接 <a ui-sref="state1">Go State 1</a>
c. 导航到与状态相关联的 url。
当用户点击这个链接时，$state服务将根据状态名state1 找到对应的元信息，提取、编译模板，并将其显示在ui-view指令指定的 视图窗口中。
2、导航视图 : ion-nav-view
3、模板视图 : ion-view
ion-view指令有一些可选的属性：
view-title - 视图标题文字
模板被载入导航视图ion-nav-view显示时，这个属性值将显示在导航栏ion-nav-bar中
cache-view - 是否对这个模板视图进行缓存
允许值为：true | false，默认为true
hide-back-button -是否隐藏导航栏中的返回按钮
当模板被载入导航视图时，如果之前有其他的模板，那么在导航栏ion-nav-bar上默认会自动 显示返回按钮（使用指令ion-nav-back-button定义）。点击该按钮将返回前一个模板。 hide-back-button的允许值为：true | false ，默认为false 注意：必须在导航栏中显式地声明返回按钮，否则即使将hide-back-button属性设为false， 这个按钮也不会出现:-)
hide-nav-bar - 是否隐藏导航栏
允许值为：true | false ,默认为false
4、导航栏 : ion-nav-bar
ion-nav-bar有以下可选的属性：
align-title - 标题对齐方式
允许值为： left | right | center。默认为center，居中对齐
no-tap-scroll - 点击导航栏时是否将内容滚动到顶部。
允许值为：true | false。默认为true，这意味着如果视图中的内容下拉很长，那么在任何时刻 点击导航栏都可以立刻回到内容的开头部分。
5、回退按钮 : ion-nav-back-button
6、视图特定按钮 : ion-nav-buttons
7、定制标题内容 : ion-nav-title
8、定制视图切换方式 : nav-transition
9、定制视图切换方向 : nav-direction
10、导航栏脚本接口 : $ionicNavBarDelegate
服务$ionicNavBarDelegate提供了控制导航栏的脚本接口：
align([direction]) - 标题对齐方式。
参数direction是可选的，允许值为：left | right | center，缺省值为center。
showBackButton([show]) - 是否显示回退按钮
参数show是可选的，允许值为：true | false，缺省值为true。
showBar(show) - 是否显示导航栏
参数show的允许值为：true | false 。
title(title) - 设置导航栏标题
参数title为HTML字符串。
11、访问历史 : $ionicHistory
ionic的导航框架会自动维护用户的访问历史栈，我们可以通过服务$ionicHistory管理访问轨迹：
viewHistory() - 返回视图访问历史数据
currentView() - 返回当前视图对象
currentHistoryId() - 返回历史ID
currentTitle([val]) - 设置或读取当前视图的标题
参数val是可选的。无参数调用currentTile()方法则返回当前视图的标题。
backView() - 返回历史栈中前一个视图对象
如果从视图A导航到视图B，那么视图A就是视图B的前一个视图对象。
backTitle() - 返回历史栈中前一个视图的标题
forwardView() - 返回历史栈中的下一个视图对象
currentStateName() - 返回当前所处状态名
goBack() - 切换到历史栈中前一个视图
当然，前提是存在前一个视图。
clearHistory() - 请空历史栈
除了当前的视图记录，clearHistory()将清空应用的全部访问历史
十六、ionic ion-tap选项卡以及 路由结合ion-tap详解
注意： 1. 不要把ion-tabs指令放在ion-content之内 2. ion-tab的内容应当放入ion-view指令内，否则ionic在计算布局时可能出错
1、ion-tabs 常用设置
（1）ion-tabs声明条带风格
（2）ion-tabs : 声明位置
2、ion-tabs 下面的 ion-tab ： 标题文字、图标和徽章显示隐藏
（1）title - 标题文字
（2）icon - 标题图标
（3）icon-on - 被选中状态的标题图标
（4）icon-off - 未选中状态的标题图标
（5）badge - 标题徽章
（6）badge-style - 标题徽章样式
（7）hidden - 隐藏
（8）disabled - 禁止
3、ion-tabs 事件 和 $ionicTabsDelegate
（1）on-select - 选中事件
（2）on-deselect - 未选中事件
（3）ng-click - 点击事件
（4）ionicTabsDelegate
使用$ionicTabsDelegate服务，我们可以在脚本中控制选项卡对象： select(index) - 选中指定的选项页 index参数从0开始，第一个选项页的index为0，第二个为1，依次类推。 selectedIndex() - 返回当前选中选项页的索引号 如果当前没有选中的选项页，则返回 -1。
4、ion-tabs路由详解
（1） 触发状态迁移的几种方式（通俗的讲就是页面跳转的几种方式）
a. 调用$state.go() 方法，这是一个高级的便利方法；
b. 点击包含 ui-sref 指令的链接 <a ui-sref="state1">Go State 1</a>
c. 导航到与状态相关联的 url。
（2） 通过href方式页面切换需要指定 url
5、ionic中结合tab状态嵌套的几种方式
有三个嵌套的方法：
（1）使用“点标记法”，例如：.state('contacts.list', {})
（2）使用parent属性，指定一个父状态的名称字符串，例如：parent: 'contacts'
（3）使用parent属性，指定一个父状态对象，例如：parent: contacts（contacts 是一个状态对象）
6、ionic路由结合tap实现页面切换
（1） 在ionic tab中定义ion-nav-view 并且加上name属性
（2）在ionic $stateProvider.state中定义view 并对应 ion-nav-view 中的name属性
7、ionic states 抽象状态abstract
十七、ionic侧边栏ion-side-menus 以及ion-tap结合侧边栏详解
1、侧边栏菜单 : ion-side-menus
<ion-side-menus> <!-- 中间内容 --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> <!-- 左侧菜单 --> <ion-side-menu side="left"> </ion-side-menu> <!-- 右侧菜单 --> <ion-side-menu side="right"> </ion-side-menu> </ion-side-menus>
2、侧边栏打开关闭切换指令 : menu-toggle/menu-close
3、ion-side-menu-content 属性设置
ion-side-menu-content指令有以下可选属性：
drag-content - 是否允许拖动内容打开侧栏菜单，默认为true。 允许值：true | false。当设置为false时，将禁止通过拖动内容打开侧栏菜单。
edge-drag-threshold - 是否启用边距检测。默认为false。 允许值：number | true | false。
如果设置为一个正数，那么只有当拖动发生在距离边界小于这个数值的情况下， 才触发侧栏显示。当设置为true时，使用默认的25px作为边距阈值。
如果设置为false或0，则意味着禁止边距检测，可以在内容区域的任何地方 拖动来打开侧栏。
4、侧边栏区域容器 : ion-side-menu 属性
ion-side-menu指令有以下属性：
side - 位于内容区的左边或右边 side属性是必须的。允许值：left | right。默认值为left。
width - 侧边栏的宽度 width属性是可选的，表示以像素为单位的侧栏菜单宽度。默认为275px。
is-enabled - 是否可用 is-enabled属性是可选的，声明该侧边栏是否可用，允许值为：true | false ，默认为true。 当侧边栏不可用时，拖拽内容或使用切换按钮都无法打开侧栏菜单。
expose-aside-when - 侧边栏自动显示条件表达式
默认情况下，侧边栏是隐藏的，需要用户向左或向右拖动内容，或者通过一个切换按钮来打开。 但是在有些场景下（比如，横放的平板）屏幕宽度足够大，这时，自动地显示侧边栏内容会更 合理。
5、脚本中控制侧边栏菜单接口 : $ionicSideMenuDelegate
脚本中控制侧边栏菜单接口，可以使用服务$ionicSideMenuDelegate：
toggleLeft([isOpen]) - 是否打开左侧栏菜单
参数isOpen是可选的，默认为true ，表示打开左侧栏菜单。
toggleRight([isOpen]) - 是否打开右侧栏菜单
参数isOpen是可选的，默认为true ，表示打开右侧栏菜单。
getOpenRatio() - 侧栏菜单打开的宽度占其总宽度比例
例如，一个100px宽的侧栏菜单，如果打开50px，那么其比例为50%，getOpenRatio()将 返回0.5 。
isOpen() - 当前侧栏菜单是否打开
不管是左侧栏菜单，还是右侧栏菜单，只要处于打开状态，isOpen()都返回 true。
isOpenLeft() - 左侧栏菜单是否打开
当左侧栏菜单处于打开状态时，isOpenLeft()返回true。
isOpenRight() - 右侧栏菜单是否打开
当右侧栏菜单处于打开状态时，isOpenRight()返回true。
canDragContent([canDrag]) - 是否允许拖拽内容以打开侧栏菜单
canDrag参数是可选的，如果canDrag为true，表示允许通过拖拽内容打开侧栏菜单。
edgeDragThreshold(value) - 设置边框距离阈值
当参数value为false或0时，意味着在内容区域任何位置进行拖拽都可以打开侧栏菜单。 如果参数value为一个数值，意味着只有当拖拽发生的位置距边框不大于此数值时，才能打开 侧栏菜单。 参数value为true等同于将value设置为25。
6、脚本ion-tap结合 ion-side-menus一起使用
十八、ionic列表
1、列表 : ion-list
ion-list指令提供以下属性用来定制列表的外观：
type - 列表种类 type属性是可选的，可用来设置列表的种类： list-inset | card。这两种列表 都产生内嵌的效果，区别在于card列表有边框的阴影效果。
show-delete - 是否显示成员内的delete按钮 show-delete属性是可选的。如果在成员内有delete按钮（ion-delete-button），使用这个 属性来通知列表是否显示元素删除按钮。允许的值为：true | false
show-reorder - 是否显示成员内的reorder按钮 show-reorder属性是可选的。如果在成员内有reorder按钮（ion-reorder-button），使用这个 属性来通知列表是否显示元素重排序按钮。允许的值为：true | false
can-swipe - 是否支持滑动方式显示成员option按钮 can-swipe属性是可选的。如果在成员内有option按钮（ion-option-button），使用这个 属性来允许或禁止通过向左滑动成员来打开option按钮。允许的值为：true | false ，默认为true。
2、ion-list ion-item 成员
ion-option-button - 选项按钮。一个ion-item内可以包含多个选项按钮
ion-delete-button - 删除按钮。一个ion-item内最多有一个删除按钮
ion-reorder-button - 重排按钮。一个ion-item内最多有一个重排按钮
3、collection-repeat : 高性能的ng-repeat
collection-repeat指令接受一个枚举表达式，同时可以附加以下的属性：
item-width - 可选。声明重复元素的宽度 item-height - 可选。声明重复元素的高度
item-render-buffer - 可选。需要载入渲染缓冲区的可视数据前后的数量。默认为3
force-refresh-images - 可选。滚动时是否强制刷新图像。允许值：true | false
4、脚本接口 : $ionicListDelegate
如果需要从脚本中控制列表元素，可以使用$ionicListDelegate服务：
showReorder([showReorder]) - 显示/关闭排序按钮
showReorder的允许值为：true | false。可以使用一个作用域上的表达式
showDelete([showDelete]) - 显示/关闭删除按钮
showDelete的允许值为： true | false。可以使用一个作用域上的表达式
canSwipeItems([canSwipeItems]) - 是否允许通过滑动方式来显示成员选项按钮
canSwipeItems的允许值为：true | false。可以使用一个作用域上的表达式
closeOptionButtons() - 关闭所有选项按钮
十九、ionic表单输入ion-checkbox ion-radio ion-toggle ion-spinner
1.复选按钮 : ion-checkbox
2.单选按钮 ：ion-radio
3. 开关按钮 : ion-toggle
4.等待指示器 : ion-spinner
二十、ionic动态组件 $ionicModal $ionicActionSheet $ionicPopup $ionicPopover $ionicLoading $ionicBackdrop
1.模态对话框 : $ionicModal
在ionic中使用模态对话框有三个步骤：
（1）声明对话框模板 使用ion-modal-view指令声明对话框模板，对话框模板通常置入 script内以构造内联模板：
<script id="a.html" type="text/ng-template"> <ion-modal-view> <!--对话框内容--> </ion-modal-view> </script>
（2）创建对话框对象 服务$ionicModal有两个方法用来创建对话框对象： fromTemplate(templateString,options) - 使用字符串模板 fromTemplateUrl(templateUrl,options) - 使用内联模板
这两个方法返回的都是一个对话框对象。
（3）操作对话框对象 对象框对象有以下方法用于显示、隐藏或删除对话框： show() - 显示对话框 hide() - 隐藏对话框 remove() - 移除对话框 isShown() - 对话框是否可视？
2.上拉菜单 : $ionicActionSheet
使用一个JSON对象定义上拉菜单选项，包括以下字段：
titleText - 上拉菜单的标题文本
buttons - 自定义按钮数组。每个按钮需要一个描述对象，其text字段用于按钮显示
cancelText - 取消按钮的文本。如果不设置此字段，则上拉菜单中不出现取消按钮
destructiveText - 危险选项按钮的文本。如果不设置此字段，则上拉菜单中不出现危险选项按钮
buttonClicked - 自定义按钮的回调函数，当用户点击时触发 cancel - 取消按钮回调函数，当用户点击时触发
destructiveButtonClicked - 危险选项按钮的回调函数，当用户点击时触发
cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为true
cssClass - 附加的CSS样式类名称
3.弹出框 : $ionicPopup
在ionic中，使用$ionicPopup服务管理弹出框：
$ionicPopup.show(options) .then(function(){ //这个函数在弹出框关闭时被调用 });
show()方法返回的是一个promise对象，当弹出框关闭后，该对象被解析，这意味着 then()方法指定的参数函数此时将被调用。
show()方法的参数options是一个JSON对象，可以包括以下字段：
title - 弹出框标题文本
subTitle - 弹出框副标题文本
template - 弹出框内容的字符串模板
templateUrl - 弹出框内容的内联模板URL
scope - 要关联的作用域对象
buttons - 自定义按钮数组。按钮总是被置于弹出框底部
cssClass - 附加的CSS样式类
另外还有：alert(options) - 警告弹出框，仅包含一个按钮供关闭弹出框；confirm(options) - 确认弹出框，包含一个取消按钮和一个确认按钮；prompt(options) - 输入提示弹出框，包含一个文本输入框、一个取消按钮和一个确认按钮。
4.浮动框 : $ionicPopover
show() - 显示浮动框
hide() - 关闭浮动框
remove() - 移除浮动框
isShown() - 浮动框是否处于显示状态？
5.载入指示器 : $ionicLoading
在ionic中，使用$ionicLoading服务操作载入指示器：
show(options) - 显示载入指示器
hide() - 隐藏载入指示器
显示参数 show()方法的options参数是一个JSON对象，可以包含如下字段：
template - 模板字符串
templateUrl - 内联模板的Url
scope - 要绑定的作用域对象
noBackdrop - 是否隐藏背景幕
hideOnStateChange - 当切换到新的视图时，是否隐藏载入指示器
delay - 显示载入指示器之前要延迟的时间，以毫秒为单位，默认为0，即不延迟
duration - 载入指示器持续时间，以毫秒为单位。时间到后载入指示器自 动隐藏。默认情况下， 载入指示器保持显示状态，知道显示的调用hide()方法
6.背景幕 : $ionicBackdrop
retain() - 保持背景幕
release() - 释放背景幕
二十一、ionic幻灯指令 ion-slide-box
1、ion-slide-box : 属性设置定制播放行为
指令ion-slide-box有一些可选的属性可以定制其播放行为：
》does-continue - 是否循环切换
你可能注意到，刚才的示例中，开头的幻灯页只能向左滑动，最后的幻灯页只能向右滑动。 将does-continue属性值设为true，就可以让幻灯页组首尾连接起来，循环切换。
》auto-play - 是否自动播放
通过将auto-play属性设置为true，可以让幻灯页自动切换。切换的间隔默认是4000ms，可以 通过属性slide-interval进行调整。
》slide-interval - 自动播放的间隔时间，默认为4000ms
》show-pager - 是否显示分页器 分页器用来指示幻灯页的选中状态，位于幻灯片的底部。 允许值为：true | false
2、ion-slide-box : 事件及变量
指令ion-slide-box提供了可选的用于事件监听的属性：
pager-click - 分页器点击事件
pager-click属性应当设置为一个当前作用域上的函数调用表达式，这个函数将被 传入被点击的分页按钮对应的幻灯页序号：index
on-slide-changed - 幻灯页切换事件
on-slide-changed属性应当设置为一个当前作用域上的函数调用表达式，这个函数 将被传入当前幻灯页的序号：$index
active-slide - 当前幻灯页索引
active-slide属性应当设置为一个当前作用域上的变量，当幻灯片切换时，这个变 量同步的反应当前的幻灯页索引号
3、脚本接口: $ionicSlideBoxDelegate
可以使用服务$ionicSlideBoxDelegate在脚本中操作幻灯片对象：
update() - 重绘幻灯片
有时，比如当容器尺寸发生变化时，需要调用update()方法重绘幻灯片。
slide(to[,speed]) - 切换到指定幻灯页 参数to表示切换的目标幻灯页序号，参数speed是可选的，表示以毫秒 为单位的切换时间
enableSlide([shouldEnable]) - 幻灯片使能 参数shouldEnable的允许值为：true | false 。
previous() - 切换到前一张幻灯页
next() - 切换到后一张幻灯页
currentIndex() - 获得当前幻灯页的序号
slideCount() - 获得全部幻灯页的数量