ionic所支持的全部事件events

摘自;http://www.haomou.net/2014/10/13/2014_ionic_api2/

（1）on-hold 同一位置觸摸時間超過500ms

      用法：<button on-hold="onHold()" class="button" >Test</buttom>

 (2)on-tap 快速觸摸某個位置

      用法：<button on-tap="onTap()" class="button" >Test</buttom>

 (3) on-release 用戶離開屏幕，結束觸摸時觸發。

       用法：<button on-release="onRelease()" class="button" >Test</buttom>

 (4) on-drag 在頁面觸摸一個點移動時觸發。

       用法：<button on-drag="onDrag()" class="button" >Test</buttom>

 (5)on-drag-up 向上拖拽時觸發。

       用法：<button on-drag-up="onDragUp()" class="button" >Test</buttom>

 (6)on-drag-right 向右拖拽時觸發。

       用法：<button on-drag-right="onDragRight()" class="button" >Test</buttom>

 (7)on-drag-left 向左拖拽時觸發。

       用法：<button on-drag-left="onDragLeft()" class="button" >Test</buttom>

 (8)on-drag-down 向下拖拽時觸發。

       用法：<button on-drag-down="onDragDown()" class="button" >Test</buttom>

 (9)on-swipe  很快速的向任何方向滑動時觸發

       用法：<button on-swipe="onSwipe()" class="button" >Test</buttom>

 (10)on-swipe-up  很快速的向上滑動時觸發

       用法：<button on-swipe-up="onSwipeUp()" class="button" >Test</buttom>

 (11)on-swipe-down  很快速的向下滑動時觸發

       用法：<button on-swipe-down="onSwipeDown()" class="button" >Test</buttom>

 (12)on-swipe-right  很快速的向右滑動時觸發

       用法：<button on-swipe-right="onSwipeRight()" class="button" >Test</buttom>

 (13)on-swipe-left  很快速的向左滑動時觸發

       用法：<button on-swipe-left="onSwipeLeft()" class="button" >Test</buttom>

 

FormInputs

  ion-checkbox

 用法：

<ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>

  ion-radio

  用法：

<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
<ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>

  ion-toggle

   用法：

<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

keyboard
在android和ios中，ionic會盡可能阻止由於滾動顯示出來的鍵盤而致使的輸入框或者可獲焦點的元素模糊不清，爲了達到這個目的，全部可獲焦點的元素都必須放在scroll view中，或者有scroll view的指令中，好比content。
一樣會阻止得到焦點時的滾動溢出，這會致使佈局的問題，好比headers得到焦點後會滾動到頂部，而後被溢出（overflow）。
這個keyboard 補丁和 Ionic Keyboard Plugin在一塊運行時能夠得到最好的效果，固然沒有這個plugin keyboard也能夠很好的工做。若是你在使用cordova，你可使用這個plugin。
若是你想在顯示鍵盤的時候隱藏某個元素，可使用‘hide-on-keyboard-open’ 類

1 2 3

<div class="hide-on-keyboard-open"> <div id="google-map"></div> </div>

keyboard-attach

keyboard-attach是一個屬性指令，它會使某個元素浮動顯示在彈出的鍵盤之上，目前只支持ion-footer-bar指令。

Lists

ion-list ,委託控制類$ionicListDelegate。
list是最普遍使用的一個控件，從最簡單的只包含文本的list，到很複雜包含按鈕，圖片的list，幾乎全部移動app應用都會用到。

list和list中的item均可以是任何html元素，對於container元素須要使用list樣式類，每條item須要應用item樣式類。

然而使用ionList 和ionItem 指令 能夠很容易的支持各類交互類型，好比經過點擊來編輯，拖拽來從新排序和刪除item項。

相關的組件：ionItem, ionOptionButton ionReorderButton, ionDeleteButton, list CSS documentation.
用法：
基本用法：

1 2 3 4 5

<ion-list> <ion-item ng-repeat="item in items"> Hello, ! </ion-item> </ion-list>

 

高級用法，包括縮略圖，刪除按鈕，重排序，劃屏。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<ion-list ng-controller="MyCtrl" show-delete="shouldShowDelete" show-reorder="shouldShowReorder" can-swipe="listCanSwipe"> <ion-item ng-repeat="item in items" class="item-thumbnail-left"> <img ng-src=""> <h2></h2> <p></p> <ion-option-button class="button-positive" ng-click="share(item)"> Share </ion-option-button> <ion-option-button class="button-info" ng-click="edit(item)"> Edit </ion-option-button> <ion-delete-button class="ion-minus-circled" ng-click="items.splice($index, 1)"> </ion-delete-button> <ion-reorder-button class="ion-navicon" on-reorder="reorderItem(item, $fromIndex, $toIndex)"> </ion-reorder-button> </ion-item> </ion-list>

API說明：

1 2 3 4 5

屬性：delegate-handle（可選），類型：string,說明：針對這個list的handle方法，可使用$ionicListDelegate 操做。 屬性：type(可選)，類型：string, 說明：list的類型，list-set或 card 屬性：show-delete(可選)，類型：boolean，是否在items中顯示刪除按鈕 屬性: show-reorder(可選)，類型：boolean，是否在items中顯示重排序按鈕 屬性：can-swipe(可選)，類型：boolean，是否在items中經過swipe顯示options按鈕，默認是true

loading

$ionicLoading , 當用戶不能交互時的彈出層，用於表示應用正在運行。
用法：

1 2 3 4 5 6 7 8 9 10 11

angular.module('LoadingApp', ['ionic']) .controller('LoadingCtrl', function($scope, $ionicLoading) { $scope.show = function() { $ionicLoading.show({ template: 'Loading...' }); }; $scope.hide = function(){ $ionicLoading.hide(); }; });

API方法：
show(options), 顯示loading加載層。若是loading已經顯示了，則會應用options的值，並保持顯示。

1 2 3 4 5 6

options，類型：object，可用的值以下： --{string=}，template 顯示的html內容 --{string=}，加載的html的url --{boolean=}，noBackDrop，是否顯示後臺頁面，默認是顯示 --{number=},delay,延時多長時間再顯示這個loading,默認無延遲 --{number=}，duration，顯示多長時間後隱藏loading層，默認一直顯示，直到調用hide方法

 

hide方法：hide(),隱藏顯示的loading層

Modal
$ionicModal,參看下面的ionicModal controller.
modal就是一個暫時浮如今view視圖最上方的內容面板，常常用做選擇或者編輯某個項目，把內容放在元素中便可。
注意：model會從它自身的scope中廣播’modal.shown’, ‘modal.hidden’, 和’modal.removed’事件，把這個做爲傳遞事件參數的一部分。移除model時會調用modal.removed 和 modal.hidden 這兩個事件。
下面的例子假設你的modal在index首頁或某個模板中，若是不是的話，你能夠去掉script標籤，經過文件名調用。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

<script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">My Modal title</h1> </ion-header-bar> <ion-content> Hello! </ion-content> </ion-modal-view> </script> angular.module('testApp', ['ionic']) .controller('MyController', function($scope, $ionicModal) { $ionicModal.fromTemplateUrl('my-modal.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; //Cleanup the modal when we're done with it! $scope.$on('$destroy', function() { $scope.modal.remove(); }); // Execute action on hide modal $scope.$on('modal.hidden', function() { // Execute action }); // Execute action on remove modal $scope.$on('modal.removed', function() { // Execute action }); });

API方法參數：

1 2 3 4 5 6 7

fromTemplate(templateString, options)，返回 ionicModal的控制器實例 ----templateString, 類型string，modal中顯示的內容。 ----options，類型object，傳遞給 ionicModal#initialize 初始化方法的參數 ------------------------------------------- fromTemplateUrl(templateUrl, options)，返回 ionicModal的控制器實例中用到的promise對象 ----templateString, 類型string，modal中顯示的內容url。 ----options，類型object，傳遞給 ionicModal#initialize 初始化方法的參數

ionicModal

由$ionicModal 服務調用，當你不須要modal的時候，要及時調用remove()方法以免發生內存泄漏。
注意：model會從它自身的scope中廣播’modal.shown’, ‘modal.hidden’, 和’modal.removed’事件，把這個做爲傳遞事件參數的一部分。移除model時會調用modal.removed 和 modal.hidden 這兩個事件。

方法：

1 2 3 4 5 6 7 8 9 10 11

initialize(options), 建立一個新的modal控制器實例 ----options，類型object，可選值： -------------{object=} 父scope，默認在$rootScope下建立獨立的scope -------------{string=} 顯示或隱藏的動畫效果. 默認是'slide-in-up' -------------{boolean=} 是否讓modal的第一個輸入得到焦點，默認是false. -------------{boolean=} 點擊背景的是否自動關閉modal，默認是 true -------------{boolean=} 是否可使用手機的硬件返回按鈕關閉modal，默認: true. show()，顯示modal，返回modal顯示後的promise對象 hide(), 隱藏modal，返回modal隱藏後的promise對象 remove()，從dom中移除modal實例，並clean，返回modal移除後的promise對象 isShown(), 返回boolean，表示當前modal是否顯示