观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（三）

十五、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() - 获得全部幻灯页的数量