ionic —指令
引用
<!--1.引入 ionic css和js-->
<!--2.定义ng-app-->
<!--3.定义 angular.module('myAPp',['ionic']); 要依赖注入ionic-->
<!--4.定义controller 和我们以前的angularjs一样去使用-->
指令
1. collection-repeat
是一个允许你渲染数千项列表,并且性能几乎不会减弱的指令。collection-repeat处理的数据必须是一个数组。
<ion-list>
<ion-item collection-repeat="item in items">
{{item}}
</ion-item>
</ion-list>
2. ion-option-button 滑动显示按钮
隶属于ionItem
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items" class="item-button-right">
{{item}}
<ion-option-button class="button-calm icon ion-edit"></ion-option-button>
<ion-option-button class="button-energized icon ion-share"></ion-option-button>
</ion-item>
</ion-list>
</ion-content>
效果图:滑动出现如下按钮
3. ion-delete-button、ion-reorder-button
<ion-list show-delete="flag.showDelete" show-reorder="flag.showReorder">
<ion-item ng-repeat="item in items">
{{item}}!
<ion-delete-button class="ion-minus-circled" ng-click="delete_item(item)"></ion-delete-button>
<ion-reorder-button class="ion-navicon" on-reorder="move_item(item,$fromIndex,$toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
删除:
$scope.delete_item=function(item){
var idx = $scope.items.indexOf(item);
// var idx = this.$index; 两种获取下标的方法
$scope.items.splice(idx,1);
};
Key:下标 item:值 可以通过传key,或者是传$index来获取下标
<ion-item ng-repeat="(key,item) in items">
{{$index}}---{{key}}--- {{item}}
<ion-delete-button class="ion-minus-circled" ng-click="deleteItem(key)"></ion-delete-button>
</ion-item>
$scope.deleteItem=function(index){
$scope.items.splice(index,1);
}
排序:
$scope.move_item = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item); console.log(fromIndex);
console.log(toIndex);
console.log(item);
};
4. ion-slide-box
<ion-slide-box delegate-handle="slideBox" auto-play="true" does-continue="true" show-pager="true">
<ion-slide ng-repeat="imgs in data">
<img src="{{imgs.img}}" alt="">
</ion-slide>
</ion-slide-box>
注入服务:$ionicSlideBoxDelegate
$ionicSlideBoxDelegate.update(); /*注意异步请求的时候 更新 slide框*/
$ionicSlideBoxDelegate.$getByHandle("slideBox").loop(true); 循环后台数据的时候不连续滚动的解决办法,前提是标签里要写上delegate-handle="slideBox"
does-continue :是否循环切换
auto-play : 是否自动播放
slide-interval : 自动播放的间隔时间,默认为4000ms
show-pager : 是否显示分页器
pager-click - 分页器点击事件
pager-click属性应当设置为一个当前作用域上的函数调用表达式,这个函数将被 传入被点击的分页按钮对应的幻灯页序号:index
$scope.click=function (index) {
$ionicSlideBoxDelegate.slide(index); /*$ionicSlideBoxDelegate.slide()跳转到指定的索引值*/
}
on-slide-changed - 幻灯页切换事件
on-slide-changed属性应当设置为一个当前作用域上的函数调用表达式,这个函数 将被传入当前幻灯页的序号:index
active-slide - 当前幻灯页索引
active-slide属性应当设置为一个当前作用域上的变量,当幻灯片切换时,这个变量同步的反应当前的幻灯页索引号
5. ion-checkbox
<ion-checkbox ng-repeat="item in list" ng-model="item.checked">
{{item.name}}
</ion-checkbox>
设置默认选中时,只需把当前的checked的值设置为true即可,checked:true
6. ion-radio
<ion-radio ng-repeat="item in items" ng-model="sel.val" ng-value="item.text" class="item-thumbnail-left">
<img src="{{item.pic}}" />
{{item.text}}
</ion-radio>
$scope.items=[
{'text':'支付宝',pic:'01.png'},
{'text':'微信',pic:'02.png'}
];
$scope.sel = {val:"微信"};
当ng-value的值等于ng-model的值得时候,默认被选中。
7. ion-toggle
<!--toggle-class="toggle-positive" 改颜色值-->
<ion-toggle ng-repeat="item in items" ng-model="item.selected" toggle-class="toggle-positive">
{{item.text}}
</ion-toggle> $scope.items=[
{text:"HTML5"},
{text:"php",selected:true},
{text:"CSS3",selected:true}
];
8. ion-spinner
<ion-list>
<ion-item ng-repeat="item in items" >
<ion-spinner icon="{{item}}"></ion-spinner>
</ion-item>
</ion-list> $scope.items = ["android","ios","ios-small","bubbles","circles",
"crescent","dots","lines","ripples","spiral"];
9. $ionicModal 模态对话框
1.新建一个html模板页面 里面的所有东西放在 ion-modal-view
2.$ionicModal依赖注入 controller
3.定义
$ionicModal.fromTemplateUrl("my-modal.html",{
scope:$scope
}).then(function(model){
$scope.modal=model;
})
angular.module("myApp", ["ionic"])
.controller("myCtrl", function($scope, $ionicModal) {
$scope.name='1243';
/*定义*/
$ionicModal.fromTemplateUrl("my-modal.html",{ /*模板的路径*/
scope:$scope /* 把我们当前作用域的值传入模板*/
}).then(function(model){
$scope.modal=model; /* 给返回的 model赋值*/
})
$scope.openModal = function() {
$scope.modal.show(); /*显示*/
};
$scope.closeModal = function() {
$scope.modal.hide(); /*隐藏*/
};
$scope.removeModal = function() {
$scope.modal.remove(); /*移除*/
};
$scope.user={ username:'',
password:''
}
$scope.login=function(){
console.log($scope.user);
$scope.modal.hide();
} });
10. $ionicActionSheet
//在controller里注入$ionicActionSheet
controller("myCtrl",function($scope, $ionicActionSheet, $timeout)
显示
$scope.show = function() {
// Show the action sheet
$ionicActionSheet.show({
titleText: "操作当前文章",// titleText - 上拉菜单的标题文本 // buttons - 自定义按钮数组。每个按钮需要一个描述对象,其text字段用于按钮显示
buttons: [
{ text: "<b>分享</b>文章" },
{ text: "移动到..." },
{ text: "收藏..." }
], // buttonClicked - 自定义按钮的回调函数,当用户点击时触发
buttonClicked: function(index) {
console.log('操作了第'+index+'个文章');
return true;
},
cancelText: "取消", // cancel - 取消按钮回调函数,当用户点击时触发
cancel: function() {
// add cancel code..
console.log('执行了取消操作');
return true;
},
// destructiveText - 危险选项按钮的文本。如果不设置此字段,则上拉菜单中不出现危险选项按钮
destructiveText: "删除", // destructiveButtonClicked - 危险选项按钮的回调函数,当用户点击时触发
destructiveButtonClicked:function(){
console.log('执行了删除操作');
return true;
}
}); // For example's sake, hide the sheet after two seconds
// $timeout(function() {
// hideSheet();
// }, 2000);
// cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为true
// cssClass - 附加的CSS样式类名称 };
11.$ionicLoading 弹框显示并自动隐藏
需要在ccontroller里注入$ionicLoading
触发显示默认1s后自动隐藏
$scope.load = function() {
//显示载入指示器
$ionicLoading.show({
template: "正在载入数据,请稍后...{{name}}",
noBackdrop:false,
// duration:20000,
scope:$scope
});
$timeout(function(){
$ionicLoading.hide();
$scope.show=true;
},2000); // template - 模板字符串
// templateUrl - 内联模板的Url
// scope - 要绑定的作用域对象
// noBackdrop - 是否隐藏背景幕,遮罩层;true为不显示
// hideOnStateChange - 当切换到新的视图时,是否隐藏载入指示器
// delay - 显示载入指示器之前要延迟的时间,以毫秒为单位,默认为0,即不延迟
// duration - 载入指示器持续时间,以毫秒为单位。时间到后载入指示器自 动隐藏。默认情况下, 载入指示器保持显示状态,知道显示的调用hide()方法
12.$ionicBackdrop 背景锁屏
需要在ccontroller里注入$ionicBackdrop
$ionicBackdrop.retain(); 显示背景
$ionicBackdrop.release(); 释放背景
13. list-inset
在ion-item标签里添加class="list-inset" 列表不全屏显示,相当于上下左右有padding的效果;
14. tabs-item-hide、页面加载事件
class="tabs-item-hide" 隐藏底部tabs切换菜单
<ion-tabs class="tabs-calm tabs-color-light tabs-icon-top {{hideTab}}"> </ion-tabs> angular.module("appController",[])
.controller("newsController",function($scope,$rootScope){
/*页面加载前触发发的方法*/
$scope.$on('$ionicView.beforeEnter', function() {
$rootScope.hideTab='';
});
/*页面加载完成触发发的方法*/
$scope.$on('$ionicView.afterEnter', function() { }, false);
})
.controller("listDatailController",function ($scope,$rootScope){
/*页面加载前触发发的方法*/
$scope.$on('$ionicView.beforeEnter', function() {
$rootScope.hideTab='tabs-item-hide';
});
// /*销毁事件 在二级页面 可以触发,效果有延迟*/
// $scope.$on('$destroy',function(){
// $rootScope.hideTab='';
// })
})
15. $ionicPopover 下拉菜单弹出框
<ion-header-bar class="bar-positive">
<a class="button" ng-click="openPopover($event);">ShowPopover</a>
<h1 class="title">$ionicPopover</h1> </ion-header-bar>
<ion-content direction="xy">
$ionicPopover
</ion-content> <script id="ez-popover.html" type="text/ng-template">
<ion-popover-view class="calm-bg light padding pop-style" style="top:0px; right: 0px;"> <div class="XXX">
<p ng-click="closePopover()">这里是自定义的一些信息</p>
</div> </ion-popover-view>
</script>
angular.module("myApp", ["ionic"])
.controller("myCtrl", function($scope, $ionicPopover) { $ionicPopover.fromTemplateUrl("ez-popover.html", {
scope: $scope
})
.then(function(popover){
$scope.popover = popover;
}) //$event
$scope.openPopover = function($event) { console.log($event); $scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//销毁事件回调处理:清理popover对象
$scope.$on("$destroy", function() {
$scope.popover.remove();
});
// 隐藏事件回调处理
$scope.$on("popover.hidden", function() {
// Execute action });
//删除事件回调处理
$scope.$on("popover.removed", function() {
// Execute action
});
});
16. 屏幕弹出框
<a class="button button-block button-calm" ng-click="showPopup();">定制弹出框/popup</a>
<a class="button button-block button-calm" ng-click="showConfirm();">确认框/confirm</a>
<a class="button button-block button-calm" ng-click="showAlert();">警告框alert</a>
<a class="button button-block button-calm" ng-click="showPrompt();">提示框/prompt</a>
app.controller("myCtrl",function($scope, $ionicPopup, $timeout) {
$scope.status = "";
// 显示定制弹出框
$scope.showPopup = function() {
$scope.data = {}
// 调用$ionicPopup弹出定制弹出框
$ionicPopup.show({
template: "<input type='password' ng-model='data.wifi'> <input type='text' ng-model='data.name'>",
title: "请输入Wi-Fi密码",
subTitle: "密码为8位",
scope: $scope,
buttons: [
{ text: "取消" },
{
text: "<b>保存</b>",
type: "button-positive",
onTap: function(e) {
return $scope.data.wifi;
}
}
]
})
.then(function(res) {
$scope.status = ["Wi-Fi密码到手了",":",res].join(" ");
});
};
// 确认弹出框
$scope.showConfirm = function() {
$ionicPopup.confirm({
title: "定制冰激凌",
template: "你确定要吃我的冰淇淋吗?",
okText:"OK"
})
.then(function(res) {
if(res) {
$scope.status = "凭什么吃我的冰淇淋!";
} else {
$scope.status = "谢谢你不吃之恩!";
}
});
};
//警告弹出框
$scope.showAlert = function() {
$ionicPopup.alert({
title: "不要吃果冻",
template: "它们可能是用旧的皮鞋帮做的!"
})
.then(function(res) {
$scope.status = "感谢上帝,你没吃鞋帮哦!11";
});
};
//输入提示框
$scope.showPrompt = function(){
//todo....
$ionicPopup.prompt({
title: "不要吃果冻",
template: "它们可能是用旧的皮鞋帮做的!"
})
.then(function(res) {
$scope.status = "感谢上帝,你没吃鞋帮哦!"+res;
});
}
});
17.$scope.$on 广播
$emit只能向parent controller传递event与data( $emit(name, args) )
$broadcast只能向child controller传递event与data( $broadcast(name, args) )
$on用于接收event与data( $on(name, listener) )
加载前、加载后、销毁广播
/*beforeEnter 加载前*/
$scope.$on('$ionicView.beforeEnter', function() {
$rootScope.hideTabs=''; /*底部菜单显示*/
});
/*afterEnter 数据加载完成*/
$scope.$on('$ionicView.afterEnter', function() { }, false); /*$destroy 销毁的时候*/
$scope.$on('$destroy',function(){ })
18.ion-side-menus 侧边栏
单独使用index结构:
<ion-side-menus>
<!-- 中间内容 -->
<ion-side-menu-content class="positive-bg">
<ion-header-bar> <!--menu-toggle="left" 按钮上面加这个menu-toggle 可以切换-->
<!--menu-close="" 关闭-->
<a menu-close class="button icon ion-navicon"></a>
<div class="title">
头部
</div>
<a menu-toggle="left" class="button icon ion-navicon"></a>
</ion-header-bar>
</ion-side-menu-content>
<!-- 左侧菜单 样式一般写为内联样式,外部样式会出现边框模糊-->
<ion-side-menu side="left" width="100" class="dark-bg">
</ion-side-menu>
<!-- 右侧菜单 当视口宽度小于500px的时候隐藏侧边栏,否则默认显示-->
<ion-side-menu side="right" class="dark-bg" expose-aside-when="(min-width:500px)">
</ion-side-menu>
</ion-side-menus>
配合tabs结构:
index.html代码:
<ion-nav-view> </ion-nav-view>
tabs.html代码:
<!--class tabs-item-hide 隐藏底部-->
<ion-side-menus>
<!-- 中间内容 -->
<ion-side-menu-content class="positive-bg">
<ion-nav-bar class="bar-positive"></ion-nav-bar>
<ion-tabs ></ion-tabs>
</ion-side-menu-content>
<!-- 左侧菜单 -->
<ion-side-menu side="left" class="dark-bg"></ion-side-menu>
<!-- 右侧菜单 -->
<ion-side-menu side="right" class="dark-bg"></ion-side-menu>
</ion-side-menus>
ionic —指令的更多相关文章
- 160914、ionic指令简单布局
1) 添加引用类库(ionic样式和ionic js文件) 2) 标题栏,页脚栏,内容区 3) Js引入ionic类库,添加页面操作方法和对象 4) 数据初始化 5) Html页面绑定方法和对象 &l ...
- Ionic学习笔记3_ionic指令简单布局
1) 添加引用类库(ionic样式和ionic js文件) 2) 标题栏,页脚栏,内容区 3) Js引入ionic类库,添加页面操作方法和对象 4) 数据初始化 5) Html页面 ...
- MAC OSX环境下cordova+Ionic的安装配置
一.简介 1.Ionic是什么 IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaSc ...
- Ionic Android开发环境搭建 上
首先,需要下载并安装Node.js. 什么是Node.js?百科上说:Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Nod ...
- Web前端开发——Ionic 3.0【爱创课堂专业前端培训】
前端开发——Ionic 3.0 一.Ionic 移动端有三种开发方向 源生APP开发, 移动端web开发 混合开发(介于以上两者之间的) 类微信小程序 reactNative,用react语法,开发a ...
- ionic2 安装(一)
1.安装java JDK 2.安装nodejs 3.安装最新版ionic 指令:npm install ionic@latest 4.安装cordova 指令:npm install -g cordo ...
- ionic3.x脚手架(基于个人项目自用)
ionic3项目开发脚手架(基于个人练习项目) 一. 基于ionic3的生产环境搭建 1. 配置安卓SDK: 安装jdk ---> 安装AndroidSDK (1) 安 ...
- angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic
首先安装 swiper npm install --save swiper 或者 bower install --save swiper <link rel="stylesheet&q ...
- 基于ionic框架封装一个图片轮播指令的几点
在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...
随机推荐
- 线索二叉树的理解和实现(Java)
线索二叉树的基本概念 我们按某种方式对二叉树进行遍历,将二叉树中所有节点排序为一个线性序列,在该序列中,除第一个结点外每个结点有且仅有一个直接前驱结点:除最后一个结点外每一个结点有且仅有一个直接后继结 ...
- 05-树9 Huffman Codes (30 分)
In 1953, David A. Huffman published his paper "A Method for the Construction of Minimum-Redunda ...
- 祝福csdn回望2014,展望2015 大致可以这样总结和展望
祝福CSDN回望2014,展望2015 大致可以这样总结和展望 回望2014,大致可以这样总结: 从寻觅一架飞机开始,到寻觅另一架飞机结束,中间觅了几天金正恩. 全年都在寻觅收钱的人.送钱的人和带着钱 ...
- (转)Centos7上部署openstack ocata配置详解
原文:http://www.cnblogs.com/yaohong/p/7601470.html 随笔-124 文章-2 评论-82 Centos7上部署openstack ocata配置详解 ...
- (转)CentOS 7 安装 Docker
原文:http://www.cnblogs.com/stulzq/p/7743073.html http://www.cnblogs.com/stulzq/p/8629165.html-------- ...
- 使用Thumbnailator处理gif图片时遇到java.lang.ArrayIndexOutOfBoundsException: 4096异常处理
环境 1.7.0_80 在使用Thumbnailator处理gif图片时,遇到问题: Exception in thread "main" java.lang.ArrayIndex ...
- JavaScript设计模式-10.工厂模式实例xhr
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 深入理解java集合框架之---------HashTable集合
HashTable是什么 HashTable是基于哈希表的Map接口的同步实现 HashTable中元素的key是唯一的,value值可重复 HashTable中元素的key和value不允许为nul ...
- Java 中 String 的构造方法
String 对于所有 Java 程序员来说都不会陌生,几乎每天甚至每个程序都会和 String 打交道,因此将 String 的常用知识汇集在此,方便查阅. 概叙: Java 中是如此定义 Stri ...
- linux进程间的网络通信
一.进程是如何进行网络通信的?socket通信的过程? 同一机器上的不同进程之间的通信方式有很多种,主要使用消息传递或共享内存.而跨网络的进程是几乎都是使用socket通信,例如web服务器,QQ. ...