Ionic 常用组件解析
$ionicModal(弹出窗口)：
//创建一个窗口
//此处注意目录的起始位置为app
$ionicModal.fromTemplateUrl('app/security/model/regist-model.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
//缓存创建的窗口
$scope.registModal = modal;
});
$scope.showRegist = function(){
$scope.registModal.show();
};
$scope.hideDialog = function() {
//隐藏
$scope.registModal.hide();
//移除
//$scope.registModal.remove();
};
$ionicLoading (loading ,可以作为信息提示)
//是否不添加全屏遮罩效果 //自动消失时间
$ionicLoading.show({template:'提示信息', noBackdrop: true, duration: 1500});
$ionicPopup (弹出一个小窗口 输入框，确认框，提示框)
//1.创建一个自定义输入框
$scope.showPopup = function() {
$scope.data = {}
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [{
text: 'Cancel'
},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
//don't allow the user to close unless he enters wifi password
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
}]
});
//输入后的处理
myPopup.then(function(res) {
console.log('Tapped!', res);
});
//自动消失时间
$timeout(function() {
myPopup.close(); //close the popup after 3 seconds for some reason
}, 3000);
};
//2.普通输入框
$scope.showPopup = function() {
$ionicPopup.prompt({
title: 'Password Check',
template: 'Enter your secret password',
inputType: 'password',
inputPlaceholder: 'Your password',
okText:'OK'
}).then(function(res) {
console.log('Your password is', res);
});
}
//3.确认框
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
});
confirmPopup.then(function(res) {
//确认
if(res) {
console.log('You are sure');
} else {//取消
console.log('You are not sure');
}
});
};
//4.提示框
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
});
//确认后的操作
alertPopup.then(function(res) {
console.log('Thank you for not eating my delicious ice cream cone');
});
};
$ionicPopover (弹出一个带箭头的小对话框)
注意调用方法时不要漏掉 $event 参数
<p>
<button ng-click="openPopover($event)">Open Popover</button>
</p>
//方法一 直接自定义
var template = '<ion-popover-view>' +
'<ion-header-bar>' +
'<h1 class="title">My Popover Title</h1>' +
'</ion-header-bar>'+
'<ion-content> Hello! </ion-content>'+
'</ion-popover-view>';
$scope.popover = $ionicPopover.fromTemplate(template, {
scope: $scope
});
//方法二 引用已存在的html
$ionicPopover.fromTemplateUrl('my-popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//拥有的相关事件
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Execute action on hidden popover
$scope.$on('popover.hidden', function() {
// Execute action
});
// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action
});
ionc-list (列表的使用,包括添加按钮，删除等)
ionc-list(基本列表创建)
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
ion-delete-button,ion-reorder-button (delete按钮显示在左方,reorder按钮显示在右方)
<!--
show-delete :控制是否显示删除按钮
show-reorder:控制是否显示reorder按钮
-->
<ion-list show-delete="isShowDelete" show-reorder="isShowEdit" class="my-divider-list">
<ion-item ng-repeat="studyItem in data.studyData">
<div class="item item-divider">
<span class="expect-label">学习内容:</span> <span class="expect-desc">{{studyItem.title}}</span>
</div>
<a class="item" >
<span class="expect-label">日期:</span> <span class="expect-desc">{{studyItem.date|date:'yyyy-M-dd'}}</span>
</a>
<a class="item" >
<span class="expect-label">学习明细:</span> <span class="expect-desc">{{studyItem.desc}}</span>
</a>
<!--
添加删除按钮
-->
<ion-delete-button class="ion-minus-circled" ng-click="deleteStudy(studyItem)">
</ion-delete-button>
<!--
添加reorder 按钮
-->
<ion-reorder-button class="ion-edit" ng-click="showEditStudyDialog(studyItem, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
ion-option-button
<!-- can-swipe="true" 添加该属性才能开启滑动附加按钮-->
<ion-list can-swipe="true">
<ion-item ng-repeat="costItem in data.costData">
<div><span class="expect-label">支出金额:</span> <span class="expect-desc">{{costItem.money}}</span></div>
<div><span class="expect-label">支出日期:</span> <span class="expect-desc">{{costItem.date|date:'yyyy-M-dd'}}</span></div>
<div><span class="expect-label">支出明细:</span> <span class="expect-desc">{{costItem.desc}}</span></div>
<!--添加滑动按钮-->
<ion-option-button class="button-info"
ng-click="showEditCost(costItem)">
修改
</ion-option-button>
<ion-option-button class="button-assertive"
ng-click="deleteCost(costItem)">
删除
</ion-option-button>
</ion-item>
</ion-list>
//该方法可以关闭已经显示的按钮
$ionicListDelegate.closeOptionButtons()
ion-slide-box (滑动卡组件)
<!--
active-slide:初始index
show-pager:是否显示下方滑动按钮
on-slide-changed：滑动事件
<ion-slide>滑动的内容
-->
<ion-slide-box active-slide="activeSlideIndex" show-pager="true" on-slide-changed = "productSlideChanged($index)">
<ion-slide ng-repeat="item in data.picTPLdata" >
<div class="list card">
<div class="item">
<h2>{{item.desc1}} <span style ="color: gray;">{{item.desc0}}</span></h2>
</div>
<div class="item item-image">
<img src="{{item.url}}">
</div>
</div>
</ion-slide>
</ion-slide-box>
ion-refresher (下拉刷新数据)
<ion-refresher pulling-text="刷新数据中.." on-refresh="doRefresh()">
</ion-refresher>
$scope.doRefresh = function() {
FGOService.getNoteData()
.then(function(result){
$scope.data.noteData = result;
//关闭刷新提示
$scope.$broadcast('scroll.refreshComplete');
})
};