属性：
ng-click = ”go(“html1”)”; 可直接跳到页面
href="#/tab/systemIntro"
ui-sref="https://www.doczj.com/doc/ed7577347.html,ers"
标签：
顶部：
以上功能，顶部块标题居中内容不允许点击标题滚动到顶部
属性：
align-title = ”left/center/right”; 标题显示位置(顶部)
no-top-scroll = ”true/false”
true:不允许点击标题滚动到顶部
false：默认，允许点击标题回到顶部
底部：
属性：
align-title = ”left/center/right”; 标题显示位置(顶部)
ion-header-bar和ion-footer-bar经过编译后其样式类将分别被设置为.bar.bar-header 和.bar.bar-footer
内容：使用ion-content指令定义内容区域：
占据header和footer以外的剩余区域。当内容超过可视区域时，ion-content 可以滚动以显示被隐藏的部分。滚动框: ion-scroll指令声明一个可滚动的容器元素，用户可以按住内容进行拖动：
在使用ion-scroll时，需要显式指定滚动框元素及内容元素的大小（高度和宽度）
属性：
direction = ”x|y|xy”内容可以滚动的方向。允许值：x|y|xy。默认为y。
zooming = ”true | false”是否支持pinch-to-zoom(捏拉缩放)。允许值：true | false。
拉动刷新: ion-refresher
使用指令ion-refresher可以为滚动容器（ion-scroll或ion-content）增加拉动刷新/pull-to-refresh的功能：
属性：
on-refresh - 当用户向下拉动足够的距离并松开时，执行此表达式
on-pulling - 当用户开始向下拉动时，执行此表达式
pulling-text - 当用户向下拉动时，显示此文本
pulling-icon - 当用户向下拉动时，显示此图标如pulling-icon="ion-happy"下拉时显示笑脸图标
refreshing-icon - 当用户向下拉动并松开后，显示的等待图标。ionic推荐使用spinner 代替这个属性
spinner - 和refreshing-icon的作用一样，但spinner是基于SVG的动画
disable-pulling-rotation - 禁止下拉图标旋转动画
注意在刷新完毕后，应当使用作用域的$broadcast()方法通知框架：$scope.$broadcast("scoll.refreshComplete")
例子：
Js文件：
angular.module("ezApp", ["ionic"])
.controller("ezCtrl", function($scope) {
$scope.items = [];
var base = 1;
$scope.doRefresh = function() {
for(var i=0;i<10;i++,base++)
$scope.items.unshift(["item ",base].join(""));
$scope.$broadcast("scroll.refreshComplete");
};
});
Html文件
滚动刷新:
使用ion-infinite-scroll指令可以为滚动容器（ion-scroll或ion-content）增加滚动刷新功能：
属性：
on-infinite - 必须。当滚动到底部时执行此表达式* distance - 可选。距底部距离百分比。当距离底部超过此数值时,执行on-infinite。默认为1%
icon - 可选。载入时显示的图标。默认是ion-load-d。ionic推荐使用spinner代替icon属性
spinner - 可选。载入时的spinner。默认是ionSpinner
immediate-check - 可选。是否在载入时立即检查滚动框范围
例子：
Js文件
angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope,$timeout){
$scope.items = [];
var base = 0;
$scope.load_more = function(){
$timeout(function(){
for(var i=0;i<10;i++,base++)
$scope.items.push(["item ",base].join(""));
$scope.$broadcast("scroll.infiniteScrollComplete");
},500);
};
});
脚本接口:可以使用服务$ionicScrollDelegate，通过脚本控制滚动容器（ion-scroll或ion-content）。$ionicScrollDelegate服务提供的常用方法如下：
resize()
重新计算容器尺寸。当父元素大小变化时，应当调用此方法
scrollTop([shouldAnimate])
滚动到内容顶部。shouldAnimate参数为true|false，表示是否使用动画展示滚动过程
scrollBottom([shouldAnimate])
滚动到内容底部。shouldAnimate参数为true|false，表示是否使用动画展示滚动过程
scrollTo(left,top[,shouldAnimate])
滚动到指定位置。left和top分别表示要滚动到的x坐标和y坐标
scrollBy(left,top[,shouldAnimate])
滚动指定偏移量。left和top分别表示要滚动的x偏移量和y偏移量
getScrollPosition()
读取当前视图位置。返回值为一个JSON对象，具有left和top属性，分别表示x和y坐标
选项卡: ion-tabs
使用ion-tabs指令声明选项卡，使用ion-tab声明选项页：
注意：
不要把ion-tabs指令放在ion-content之内
ion-tab的内容应当放入ion-view指令内，否则ionic在计算布局时可能出错
AngularJS编译后，ion-tabs元素将被应用.tabs样式，因此我们可以使用相关的样式调整ion-tabs的外观：
例子:
ion-tabs : 声明条带风格
如果学习过课程：ionic之CSS框架，应该记得使用.tabs-striped样式可以将选项卡声明为条带风格：
也可以通过$ionicConfigProvider在AngularJS的配置阶段，将选项卡设置为条带风格：
app.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.style("striped"); // 参数可以是：standard | striped
})
ion-tabs : 声明位置
如果学习过课程：ionic之CSS框架，应该记得使用.tabs-top可以将选项卡置于顶部标题栏之下：
也可以通过$ionicConfigProvider，在配置阶段设置选项卡的位置是在顶部还是底部：
app.config(function($ionicConfigProvider){
$ionicConfigProvider.tabs.position("top"); //参数可以是：top | bottom
});
ion-tab ：标题文字、图标和徽章
ion-tab指令有以下属性用于设置文本、图标和徽章：
title - 标题文字
标题文字是必须的。该属性值将作为选项页的标题文字。
icon - 标题图标
使用icon属性是可选的，该属性值将用来在标题文字旁边添加一个指定的图标。这个属性的值将被作为icon-on和icon-off的默认值
icon-on - 被选中状态的标题图标
如果一个选项页被选中，ion-tabs将使用icon-on属性的值绘制图标。如果icon-on 没有设置，那么ion-tabs就使用icon 属性的值绘制图标
icon-off - 未选中状态的标题图标
如果一个选项页没有被选中，ion-tabs将使用icon-off属性的值绘制图标。如果icon-off 没有设置，那么ion-tabs就使用icon属性的值绘制图标
badge - 标题徽章
ion-tabs使用badge属性的值在标题文字旁边添加一个圆形的文字标识，通常用来显示数字。这个属性是可选的，可以是一个具体的值，也可以是当前作用域上的一个变量
badge-style - 标题徽章样式
使用badge-style属性设置徽章的样式，比如配色方案：barge-{color}例：badge-style="badge-assertive" 红色
ion-tab : 隐藏、禁止
有些情况下，可能需要临时性地隐藏或禁止某个选项页，ion-tab提供了两个属性用来实现这个功能：
hidden - 隐藏
hidden属性是当前作用域上的表达式。当其值为true时，选项页将不可见
disabled - 禁止
disabled属性是当前作用域上的表达式。当值为true时，选项页将不响应用户的点击
ion-tab : 事件
ion-tab指令提供了挂接事件的属性：
on-select - 选中事件
可选。选项页从未选中状态切换到选中状态时执行此表达式
on-deselect - 未选中事件
可选。选项页从选中状态切换到未选中状态时执行此表达式
ng-click - 点击事件
可选。选项页被点击时执行此表达式。如果这个属性被设置，那么ion-tabs将不会自动切换选项页，调用者需要手动调用$ionicTabsDelegate的select()方法进行选项页切换
脚本接口: $ionicTabsDelegate
使用$ionicTabsDelegate服务，我们可以在脚本中控制选项卡对象：
select(index) - 选中指定的选项页
index参数从0开始，第一个选项页的index为0，第二个为1，依次类推。
selectedIndex() - 返回当前选中选项页的索引号
如果当前没有选中的选项页，则返回-1。
angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope,$ionicTabsDelegate,$interval){
var idx=0;
$interval(function(){
idx = (idx + 1) % 3;
$ionicTabsDelegate.select(idx);
},2000);
});
列表: ion-list
列表是常用的信息组织方式。在ionic中，使用ion-list指令声明列表元素，使用ion-item指令声明成员元素：
...
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。
ion-item : 成员按钮
ion-item有三种预定义的按钮：
ion-option-button - 选项按钮。
一个ion-item内可以包含多个选项按钮。选项按钮是隐藏的，需要用户向左滑动成员，以显示选项按钮。可以使用ion-list的can-swipe属性允许或禁止滑动开启选项按钮。
使用ng-click指令来挂接点击事件监听函数，其原型如下：
var optionListener = function(item){...}
ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。
ion-delete-button - 删除按钮
一个ion-item内最多有一个删除按钮。删除按钮在显示时总是位于成员的最左端。可以使用ion-list的show-delete属性显示或隐藏删除按钮
使用ng-click指令来挂接点击事件监听函数，其原型如下：
var deleteListener = function(item){...}
ionic在捕捉到用户的点击事件时，将调用此函数，并传入当前的item对象。
ion-reorder-button - 重排按钮
一个ion-item内最多有一个重排按钮。重排按钮在显示时总是位于成员的最右端。可以使用ion-list的show-reorder 属性显示或隐藏重排按钮
使用on-reorder属性来挂接重排事件监听函数，其原型如下：
var reorderListener = function(item,$fromIndex,$toIndex){...}
ionic在捕捉到用户的重排事件时，将调用此函数，并传入当前的item对象、原序号及目标序号。
collection-repeat : 高性能的ng-repeat
collection-repeat指令和ng-repeat指令类似，但是更适用于大数据量的列表数据，这是因为，它只将处于可视区域的数据渲染到DOM上：
collection-repeat指令接受一个枚举表达式，同时可以附加以下的属性：
item-width - 可选。声明重复元素的宽度
item-height - 可选。声明重复元素的高度
item-render-buffer - 可选。需要载入渲染缓冲区的可视数据前后的数量。默认为3
force-refresh-images - 可选。滚动时是否强制刷新图像。允许值：true | false
脚本接口: $ionicListDelegate
如果需要从脚本中控制列表元素，可以使用$ionicListDelegate服务：
showReorder([showReorder]) - 显示/关闭排序按钮
showReorder的允许值为：true | false。可以使用一个作用域上的表达式
showDelete([showDelete]) - 显示/关闭删除按钮
showDelete的允许值为：true | false。可以使用一个作用域上的表达式
canSwipeItems([canSwipeItems]) - 是否允许通过滑动方式来显示成员选项按钮
canSwipeItems的允许值为：true | false。可以使用一个作用域上的表达式
closeOptionButtons() - 关闭所有选项按钮
侧边栏菜单: ion-side-menus
侧边栏菜单是一个最多包含三个子容器的元素：
默认情况下，侧边栏菜单将只显示ion-side-menu-content容器的内容。向左滑动时，将显示右边栏ion-side-menu容器的内容，向右滑动时，将显示左边栏ion-side-menu容器的内容。
在ionic中，使用ion-side-menus指令定义侧边栏菜单：
切换指令: menu-toggle/menu-close
menu-toggle指令用来给元素增加切换侧栏内容显示状态的功能：
menu-close指令用来给元素增加关闭侧栏内容的功能：
与menu-toggle指令不同，menu-close不需要指定要关闭的侧栏是哪一边，它直接将当前打开的侧栏关闭。
例子：
主区域容器: ion-side-menu-content
使用指令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，则意味着禁止边距检测，可以在内容区域的任何地方拖动来打开侧栏。
侧边栏区域容器: ion-side-menu
使用指令ion-side-menu声明侧边栏区域容器：
ion-side-menu指令有以下属性：
side - 位于内容区的左边或右边
side属性是必须的。允许值：left | right。默认值为left。
width - 侧边栏的宽度
width属性是可选的，表示以像素为单位的侧栏菜单宽度。默认为275px。
is-enabled - 是否可用
is-enabled属性是可选的，声明该侧边栏是否可用，允许值为：true | false ，默认为true。当侧边栏不可用时，拖拽内容或使用切换按钮都无法打开侧栏菜单。
expose-aside-when - 侧边栏自动显示条件表达式
默认情况下，侧边栏是隐藏的，需要用户向左或向右拖动内容，或者通过一个切换按钮来打开。但是在有些场景下（比如，横放的平板）屏幕宽度足够大，这时，自动地显示侧边栏内容会更合理。
expose-aside-when属性就是处理这种情况的，和CSS3的@meida类似，expose-aside-when需要一个CSS表达式，例如：expose-aside-when="(min-width:500px)"，这意味着当屏幕宽度大于500px时将自动显示侧栏菜单。
ionic为expose-aside-when提供了一个快捷选项：large ，这等同于 (min-width:768px)。
脚本接口: $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。
例子：
angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope,$ionicSideMenuDelegate){
$scope.toggle = function(){
$ionicSideMenuDelegate.toggleRight();
};
});
幻灯片: ion-slide-box
幻灯片也是一种常见的UI表现方式，它从一组元素中选择一个投射到屏幕可视区域，用户可以通过滑动方式（向左或向右）进行切换：
在ionic中，使用ion-slide-box指令声明幻灯片元素，使用ion-slide 指令声明幻灯页元素：
...
定制其播放行为：
does-continue - 是否循环切换
你可能注意到，上一节的示例中，开头的幻灯页只能向左滑动，最后的幻灯页只能向右滑动。将does-continue属性值设为true，就可以让幻灯页组首尾连接起来，循环切换。
auto-play - 是否自动播放
通过将auto-play属性设置为true，可以让幻灯页自动切换。切换的间隔默认是4000ms，可以通过属性slide-interval 进行调整。
slide-interval - 自动播放的间隔时间，默认为4000ms
show-pager - 是否显示分页器
分页器用来指示幻灯页的选中状态，位于幻灯片的底部。允许值为：true | false
事件及变量：
指令ion-slide-box提供了可选的用于事件监听的属性：
pager-click - 分页器点击事件
pager-click属性应当设置为一个当前作用域上的函数调用表达式，这个函数将被传入被点击的分页按钮对应的幻灯页序号：index
on-slide-changed - 幻灯页切换事件
on-slide-changed属性应当设置为一个当前作用域上的函数调用表达式，这个函数将被传入当前幻灯页的序号：$index
active-slide - 当前幻灯页索引
active-slide属性应当设置为一个当前作用域上的变量，当幻灯片切换时，这个变量同步的反应当前的幻灯页索引号
脚本接口: $ionicSlideBoxDelegate
可以使用服务$ionicSlideBoxDelegate在脚本中操作幻灯片对象：
update() - 重绘幻灯片
有时，比如当容器尺寸发生变化时，需要调用update()方法重绘幻灯片。
slide(to[,speed]) - 切换到指定幻灯页
参数to表示切换的目标幻灯页序号，参数speed是可选的，表示以毫秒为单位的切换时间
enableSlide([shouldEnable]) - 幻灯片使能
参数shouldEnable的允许值为：true | false 。
previous() - 切换到前一张幻灯页
next() - 切换到后一张幻灯页
currentIndex() - 获得当前幻灯页的序号
slideCount() - 获得全部幻灯页的数量
按钮
复选按钮: ion-checkbox
单选按钮：ion-radio
开关按钮: ion-toggle
ion-toggle有两个可选的属性：
ng-model - 模型变量
和复选按钮一样，开关按钮也可以使用可选的ng-model属性实现与作用域变量的双向绑定。
toggle-class - 样式类
可以使用可选的toggle-class属性为开关按钮声明额外的样式。比如：toggle-{color} 用来声明配色方案。等待指示器: ion-spinner
模态对话框: $ionicModal
模态对话框常用来供用户进行选择或编辑，在模态对话框关闭之前，其他的用户交互行为被阻止。
在ionic中使用模态对话框有三个步骤：
1.声明对话框模板
使用ion-modal-view指令声明对话框模板，对话框模板通常置入 script内以构造内联模板：
2.创建对话框对象
服务$ionicModal有两个方法用来创建对话框对象：
fromTemplate(templateString,options) - 使用字符串模板
fromTemplateUrl(templateUrl,options) - 使用内联模板
这两个方法返回的都是一个对话框对象。
3.操作对话框对象
对象框对象有以下方法用于显示、隐藏或删除对话框：
show() - 显示对话框
hide() - 隐藏对话框
remove() - 移除对话框
isShown() - 对话框是否可视？
上拉菜单: $ionicActionSheet
使用一个JSON对象定义上拉菜单选项，包括以下字段：
titleText - 上拉菜单的标题文本
buttons - 自定义按钮数组。每个按钮需要一个描述对象，其text字段用于按钮显示
cancelText - 取消按钮的文本。如果不设置此字段，则上拉菜单中不出现取消按钮
destructiveText - 危险选项按钮的文本。如果不设置此字段，则上拉菜单中不出现危险选项按钮
buttonClicked - 自定义按钮的回调函数，当用户点击时触发
cancel - 取消按钮回调函数，当用户点击时触发
destructiveButtonClicked - 危险选项按钮的回调函数，当用户点击时触发
cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为true
cssClass - 附加的CSS样式类名称
例子：
angular.module("ezApp", ["ionic"])
.controller("ezCtrl",function($scope, $ionicActionSheet,
$timeout) {
$scope.show = function() {
var hideSheet = $ionicActionSheet.show({
titleText: "操作当前文章",
buttons: [
{ text: "分享文章" },
{ text: "移动到..." }
],
buttonClicked: function(index) {
return true;
},
cancelText: "取消",
cancel: function() {
// add cancel code..
},
destructiveText: "删除",
destructiveButtonClicked:function(){
}
});
$timeout(function() {
// hideSheet();
}, 2000);
};
});
弹出框: $ionicPopup
弹出框通常用于提醒、警告等，在用户响应之前其他交互行为不能继续。与模态对话框覆盖整个屏幕空间不同，弹出框通常仅占据一部分屏幕空间。
在ionic中，使用$ionicPopup服务管理弹出框：
$ionicPopup.show(options)
.then(function(){
//这个函数在弹出框关闭时被调用
});
show()方法返回的是一个promise对象，当弹出框关闭后，该对象被解析，这意味着then()方法指定的参数函数此时将被调用。
show()方法的参数options是一个JSON对象，可以包括以下字段：
title - 弹出框标题文本
subTitle - 弹出框副标题文本
template - 弹出框内容的字符串模板
templateUrl - 弹出框内容的内联模板URL
scope - 要关联的作用域对象
buttons - 自定义按钮数组。按钮总是被置于弹出框底部
cssClass - 附加的CSS样式类
简化的特定弹出框
除了show()方法，$ionicPopup还针对一些特定场景提供了简化的方法，这些方法不需要自定义按钮，只需要设置title 和template即可：
alert(options) - 警告弹出框，仅包含一个按钮供关闭弹出框
confirm(options) - 确认弹出框，包含一个取消按钮和一个确认按钮
prompt(options) - 输入提示弹出框，包含一个文本输入框、一个取消按钮和一个确认按钮
浮动框: $ionicPopover
浮动框通常用以非侵入的方式提供当前视图的额外信息。
在ionic中使用浮动框的几个步骤：
1.声明模板
需要首先利用ion-popover-view指令声明一个模板内容：
2.创建浮动框对象
使用$ion-popover服务的以下方法创建浮动框对象：
fromTemplate(templateString,options) - 使用模板字符串构造浮动框
fromTemplateurl(templateUrl,options) - 使用内联模板构造浮动框
注意：这两个方法返回的都是promise对象，在浮动框对象被构造成功后得到解析，这时可以获取浮动框对象：$ionicPopover.fromTemplate(...)
.then(function(popover){
//popover参数是浮动框对象
});
3.操作浮动框对象
浮动框对象提供以下方法：
show() - 显示浮动框
hide() - 关闭浮动框
remove() - 移除浮动框
isShown() - 浮动框是否处于显示状态？
载入指示器: $ionicLoading
当进行耗时的操作时，可以使用载入指示器提示用户操作进行中，并暂时阻止交互。载入指示器通常会叠加一个半透明的幕布层以便阻止用户的交互。
在ionic中，使用$ionicLoading服务操作载入指示器：
show(options) - 显示载入指示器
hide() - 隐藏载入指示器
显示参数
show()方法的options参数是一个JSON对象，可以包含如下字段：
template - 模板字符串
templateUrl - 内联模板的Url
scope - 要绑定的作用域对象
noBackdrop - 是否隐藏背景幕
hideOnStateChange - 当切换到新的视图时，是否隐藏载入指示器
delay - 显示载入指示器之前要延迟的时间，以毫秒为单位，默认为0，即不延迟
duration - 载入指示器持续时间，以毫秒为单位。时间到后载入指示器自动隐藏。默认情况下，载入指示器保持显示状态，知道显示的调用hide()方法
参数配置服务: $ionicLoadingConfig
如果要在多处都使用载入指示器，统一对options参数进行配置是一个更好的方法，这样在应用时直接调用show()方法而不必传递参数了。这通过定义一个constant provider来实现：
angular.module("ezApp", ["ionic"])
.constant("$ionicLoadingConfig",{
template : "default loading template ..."
})
例子：
angular.module("ezApp", ["ionic"])
.controller("ezCtrl", function($scope, $ionicLoading,$timeout) {
$scope.items = [];
var idx = 0;
$scope.load = function() {
//显示载入指示器
$ionicLoading.show({
template: "正在载入数据，请稍后..."
});
//延时2000ms来模拟载入的耗时行为
$timeout(function(){
for(var i=0;i<10;i++,idx++) $scope.items.unshift("item " + idx);
//隐藏载入指示器
$ionicLoading.hide();
},2000);
};
});
背景幕: $ionicBackdrop
在浮动框、载入指示器中我们已经接触过背景幕。它是一个覆盖全屏的半透明图层，用来阻止用户的交互行为。
我们可以使用$ionicBackdrop服务单独地使用背景幕：
retain() - 保持背景幕
release() - 释放背景幕
为什么不是show()和hide()呢？
在UI中可能有多个指令/元素都使用背景幕，为每个指令都创建单独的背景幕是不明智的。
事实上，$ionicBackdrop服务在DOM中只保留有一个背景幕。每次当使用retain()方法时，只是给背景幕加一次锁，release()方法只是给背景幕解一次锁。如果retain()被调用三次，背景幕将一直显示，直到release()也被调动三次后才隐藏。
例子：angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope, $ionicBackdrop, $timeout) {
$scope.locks = 0;
//保持背景幕
$scope.retain = function() {
$ionicBackdrop.retain();
$scope.locks++;
};
//释放背景幕
$scope.release = function() {
$ionicBackdrop.release();
$scope.locks > 0 ? $scope.locks-- : 0;
};
});
路由机制: 状态机
对于视图的路由，ionic没有使用AngularJS的路由模块（ng-route），而是使用了angular-ui项目的ui-route模块。
ionic.bundle.js已经打包了ui-route模块，所以我们使用时不需要单独引入。
和通常基于URL匹配的路由机制不同，ui-route是基于状态机的导航：
可以认为视图元素ui-view有多个状态，比如：state1/state2/state3。在任何一个时刻，视图元素只能处于某一状态下。这些状态是由状态机管理的。
在ui-route中的$state服务就是一个状态机实例，在任何时刻，我们可以使用其go()方法跳转到指定名称的状态。
配置状态机
需要指出的是，状态的划分以及每个状态的元信息（比如模板、url等）是在配置阶段通过$stateProvider完成的：angular.module("ezApp",["ionic"])
.config(function($stateProvider){
$stateProvider.state("state1",{...})
.state("state2",{...})
.state3("state3",{...});
});
触发状态迁移
在ui-router中定义的指令ui-sref用来触发状态迁移：
当用户点击这个链接时，$state服务将根据状态名state1 找到对应的元信息，提取、编译模板，并将其显示在ui-view 指令指定的视图窗口中。
例子：
angular.module("ezApp", ["ionic"])
.config(function($stateProvider,$urlRouterProvider) {
//配置状态机
$stateProvider
.state("home", {
templateUrl: "home.html" //内联模板的id
})
.state("music", {
templateUrl: "music.html" //内联模板的id
});
})
.controller("ezCtrl",function($scope,$state){
//切换到状态: home
$state.go("home");
});
导航视图: ion-nav-view
在ionic里，我们使用ion-nav-view指令代替AngularUI Route中的ui-view指令，来进行模板的渲染：
和ui-view一样，ion-nav-view总是根据状态的变化，来提取对应的模板并将其在DOM树中渲染。
例子：
Js文件
var app = angular.module("ezApp", ["ionic"]);
app.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state("map", {
templateUrl: "map.html"
})
.state("novel", {
templateUrl: "novel.html"
});
})
.controller("ezCtrl",function($scope,$state){
$state.go("map"); //设置默认启动页
});
模板视图: ion-view
尽管在模板视图中可以随便写HTML，但是，在ionic中，我们总是使用指令ion-view来作为模板视图内容的容器，这是为了与ionic的导航框架保持兼容：
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
导航栏: ion-nav-bar
ion-nav-bar指令用来声明一个居于屏幕顶端的导航栏，它的内容随导航视图的状态变化而自动同步变化：
ion-nav-bar有以下可选的属性：
align-title - 标题对齐方式
允许值为：left | right | center。默认为center，居中对齐
no-tap-scroll - 点击导航栏时是否将内容滚动到顶部。
允许值为：true | false。默认为true，这意味着如果视图中的内容下拉很长，那么在任何时刻点击导航栏都可以立刻回到内容的开头部分。
视图特定按钮: ion-nav-buttons
在ionic的导航框架中，导航栏是公共资源。那么，如果我们需要在不同的状态下（即载入不同的模板视图），在导航栏上显示一些不同的按钮，该怎么办？
答案是，在ion-view指令声明的元素内使用ion-nav-buttons指令添加一组按钮，ionic的导航框架看到这个指令时，就会自动地将这些按钮安置到导航栏中。
指令ion-nav-buttons必须是指令ion-view的直接后代：
ion-nav-buttons指令有一个属性用于声明这些按钮在导航栏中的位置：
side - 在导航条的那一侧放置按钮。允许值：primary | secondary | left | right
primary和secondary是平台相关的。比如在iOS上，primary被映射到左边，而secondary 被映射到最右边，但是在Android上，primary和secondary都在最右侧。
left和right则明确地声明是在左侧还是右侧，与平台无关。
定制标题内容: ion-nav-title
导航栏中默认显示所载入模板视图的view-title属性值，但ionic允许我们使用 ion-nav-title指令，使用任意的HTML片段改变它！
ion-nav-title必须是ion-view的直接后代：
定制视图切换方式: nav-transition
视图切换时的动画转场方式，可以使用nav-transition指令声明：
目前支持的转场方式有三种：
android - android模拟
ios - ios模拟* none - 取消转场动画
例子：
定制视图切换方向: nav-direction
使用nav-direction指令声明视图转场时的切换方向：
目前支持的选项有：
forward - 新视图从右向左进入
back - 新视图从左向右进入
enter -* exit -
swap -
导航栏脚本接口: $ionicNavBarDelegate
服务$ionicNavBarDelegate提供了控制导航栏的脚本接口：
align([direction]) - 标题对齐方式。
参数direction是可选的，允许值为：left | right | center，缺省值为center。
showBackButton([show]) - 是否显示回退按钮
参数show是可选的，允许值为：true | false，缺省值为true。
showBar(show) - 是否显示导航栏
参数show的允许值为：true | false 。
title(title) - 设置导航栏标题
参数title为HTML字符串。
访问历史: $ionicHistory
ionic的导航框架会自动维护用户的访问历史栈，我们可以通过服务$ionicHistory管理访问轨迹：viewHistory() - 返回视图访问历史数据
currentView() - 返回当前视图对象
currentHistoryId() - 返回历史ID
currentTitle([val]) - 设置或读取当前视图的标题
参数val是可选的。无参数调用currentTile()方法则返回当前视图的标题。
backView() - 返回历史栈中前一个视图对象
如果从视图A导航到视图B，那么视图A就是视图B的前一个视图对象。
backTitle() - 返回历史栈中前一个视图的标题
forwardView() - 返回历史栈中的下一个视图对象
currentStateName() - 返回当前所处状态名
goBack() - 切换到历史栈中前一个视图
当然，前提是存在前一个视图。
clearHistory() - 请空历史栈
除了当前的视图记录，clearHistory()将清空应用的全部访问历史
clearCache() - 清空视图缓存
clearCache()方法将每一个ion-nav-view缓存的视图都清空，包括移除DOM及绑定的作用域对象。nextViewOptions(options) - 设置后续视图切换的选项
nextViewOptions()方法的options参数是一个JSON对象，目前支持的选项字段有：
var options = {
disableAnimate : true , // 在后续的转场中禁止动画
disableBack : true, //后续的视图将不能回退
historyRoot : true //下一个视图将作为历史栈的根节点
};
验证输入框是否为空,为空时span显示红色