ionic+angularjs学习笔记综述.docx

属性： ng-click = ”go(“html1”)”; 可直接跳到页面 href=#/tab/systemIntro ui-sref=tabs.users 标签： 顶部：ion-header-bar.../ion-header-bar ion-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-bar ion-footer-bar class=bar-positive h1 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-positive h1 class=titleion-refresher/h1 /ion-header-bar ion-content ion-refresher pulling-text=刷新 on-refresh=doRefresh() /ion-refresher ul class=list li cl