Ionic 常用组件解析

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');
		})
	};