ionic+angularjs学习笔记程序.docx

属性：ng-click = ”go(“html1”)”; 可直接跳到页面href=#/tab/systemIntroui-sref=tabs.users标签：顶部：ion-header-bar.../ion-header-barion-header-bar align-title=center class=bar-positive no-top-scroll=”true”h1 class=titleion-header-bar/h1/ion-header-bar以上功能，顶部块标题居中内容不允许点击标题滚动到顶部属性：align-title = ”left/center/right”; 标题显示位置(顶部)no-top-scroll = ”true/false”true:不允许点击标题滚动到顶部false：默认，允许点击标题回到顶部底部：ion-footer-bar.../ion-footer-barion-footer-bar class=bar-positiveh1 class=titleion-footer-bar/h1/ion-footer-bar属性：align-title = ”left/center/right”; 标题显示位置(顶部)ion-header-bar和ion-footer-bar经过编译后其样式类将分别被设置为.bar.bar-header 和.bar.bar-footer内容：使用ion-content指令定义内容区域：ion-content.../ion-content占据header和footer以外的剩余区域。当内容超过可视区域时，ion-content 可以滚动以显示被隐藏的部分。滚动框 : ion-scroll指令声明一个可滚动的容器元素，用户可以按住内容进行拖动：在使用ion-scroll时，需要显式指定滚动框元素及内容元素?的大小（高度和宽度）ion-scroll!--content--/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的功能：ion-refresher/ion-refresher属性：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;i10;i++,base++)$scope.items.unshift([item ,base].join());$scope.$broadcast(scroll.refreshComplete);};});Html文件ion-header-bar class=bar-positiveh1 class=titleion-refresher/h1/ion-header-barion-contention-refresher pulling-text=刷新 on-refresh=doRefresh() /ion-refresherul class=listli class=item ng-repeat=item in items{{item}}/li/ul/ion-content滚动刷新 : ion-infinite-scroll on-infinit