ionic常用插件——日期選擇
效果圖如下：
1振峻、先導(dǎo)入ionic-datepicker.bundle.min 這個(gè)JS文件。
2客们、在app.js文件中啟動(dòng)模塊注入’ionic-datepicker’
3、頁(yè)面代碼：
<label class="item item-input">
<span class="input-label">服務(wù)日期：</span>
<ionic-datepicker input-obj="datepickerObject" class="item-button-right">
<button class="button button-clear button-positive">
{{datepickerObject.inputDate | date:'yyyy-MM-dd'}}
</button>
</ionic-datepicker>
</label>
4、js中的代碼：
var weekDaysList = ["日", "一", "二", "三", "四", "五", "六"];
var monthList = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
var datePickerCallback = function (val) {
if (typeof(val) === 'undefined') {
console.log('No date selected');
} else {
console.log('Selected date is : ', val);
$scope.datepickerObject.inputDate = val;
}
};
$scope.datepickerObject = {
titleLabel: '日期選擇', //Optional
todayLabel: '今天', //Optional
closeLabel: '取消', //Optional
setLabel: '確定', //Optional
setButtonType: 'button-calm', //Optional
todayButtonType: 'button-calm', //Optional
closeButtonType: 'button-calm', //Optional
inputDate: new Date(), //Optional
mondayFirst: false, //Optional
//disabledDates: disabledDates, //Optional
weekDaysList: weekDaysList, //Optional
monthList: monthList, //Optional
templateType: 'modal', //Optional
modalHeaderColor: 'bar-calm', //Optional
modalFooterColor: 'bar-calm', //Optional
from: new Date(), //Optional
to: new Date(2018, 12, 31), //Optional
callback: function (val) { //Mandatory
datePickerCallback(val);
}
};
ion-scroll 設(shè)置了隱藏橫向滾動(dòng)條無(wú)效
情景重現(xiàn)：
<ion-scroll direction="x" scrollbar-x="false" zooming="false">
<div class="row text-align-c padding-0">
<div class="col col-20 border-right padding-0 selection-tap" ng-if="isFindTab"
ng-class="{0: 'select-button default'}[selectedIndex]"
ng-click="selectTab(0)">發(fā)現(xiàn)
</div>
<div class="col col-20 border-right padding-0 selection-tap"
ng-class="{1: 'select-button default'}[selectedIndex]"
ng-click="selectTab(1)">全部
</div>
<div class="col col-20 border-right padding-0 selection-tap"
ng-class="{2: 'select-button default'}[selectedIndex]"
ng-click="selectTab(2)">冰箱
</div>
</ion-scroll>
上面代碼里叙淌，ion-scroll 設(shè)置了屬性scrollbar-x="false"，但是在瀏覽器觀(guān)看效果時(shí)愁铺，還是會(huì)出現(xiàn)橫向滾動(dòng)條鹰霍，在瀏覽器里查看ion-scroll的屬性時(shí)，class屬性 是：class=" scroll-view ionic-scroll scroll-x",
當(dāng)我在代碼里給 ion-scroll 手動(dòng)加一個(gè) style="overflow:hidden;"后茵乱，問(wèn)題就解決了茂洒。。瓶竭。督勺。
實(shí)現(xiàn)長(zhǎng)按復(fù)制文字
html部分
給想要長(zhǎng)按復(fù)制的標(biāo)簽添加屬性 data-tap-disabled="true"
css部分
給改元素添加樣式 -webkit-user-select: text !important;user-select: text !important;
原理
data-tap-disabled 屬性是禁用ionic的tap處理機(jī)制，user-select: text 是讓元素恢復(fù)可選擇斤贰。ionic的滾動(dòng)條是監(jiān)聽(tīng)tap事件的智哀，必須加上了 data-tap-disabled="true" 使ionic停止監(jiān)聽(tīng)該元素的tap事件，這樣該元素才會(huì)觸發(fā)原生的長(zhǎng)按事件荧恍。
來(lái)源：簡(jiǎn)書(shū)
ionic監(jiān)測(cè)app是否在后臺(tái)運(yùn)行
$ionicPlatform.on('pause',function () {
console.log("app進(jìn)入后臺(tái)運(yùn)行");
});
$ionicPlatform.on('resume',function () {
console.log("app進(jìn)入前臺(tái)運(yùn)行");
});
$ionicpopup定制樣式
無(wú)論是調(diào)用$ionicPopup下面的 alert(), prompt(), and confirm()都可以傳一個(gè)對(duì)象當(dāng)做參數(shù)瓷叫。如：
{
title: '', // String. The title of the popup.
cssClass: '', // String, The custom CSS class name
subTitle: '', // String (optional). The sub-title of the popup.
template: '', // String (optional). The html template to place in the popup body.
templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
scope: null, // Scope (optional). A scope to link to the popup content.
buttons: [{ // Array[Object] (optional). Buttons to place in the popup footer.
text: 'Cancel',
type: 'button-default',
onTap: function(e) {
// e.preventDefault() will stop the popup from closing when tapped.
e.preventDefault();
}
}, {
text: 'OK',
type: 'button-positive',
onTap: function(e) {
// Returning a value will cause the promise to resolve with the given value.
return scope.data.response;
}
}]
}
很關(guān)鍵的一個(gè)屬性是 cssClass屯吊，這里定義的class類(lèi)名將會(huì)添加到彈出框的最外層的div上，然后只要把自己想要定制的樣式寫(xiě)進(jìn)在css或者sass里面就可以了摹菠，
詳細(xì)信息請(qǐng)查看官網(wǎng)網(wǎng)址:$ionicPopup詳細(xì)使用說(shuō)明
angular關(guān)于http攔截器
angularJs通過(guò)攔截器提供了一個(gè)從全局層面對(duì)http請(qǐng)求進(jìn)行處理的途徑盒卸。
攔截服務(wù)工廠(chǎng)
var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
return {
//該方法會(huì)在 $http 發(fā)送請(qǐng)求后臺(tái)之前執(zhí)行
//該方法接收請(qǐng)求配置對(duì)象(request configuration object)作為參數(shù)，然后必須返回配置對(duì)象或者 promise 次氨。
request: function(config) {
// do something on request success
return config || $q.when(config);
},
//該方法會(huì)俘獲那些被上一個(gè)請(qǐng)求攔截器中斷的請(qǐng)求
requestError: function(rejection) {
// do something on request error
return $q.reject(rejection)
},
//該方法會(huì)在 $http 接收到從后臺(tái)過(guò)來(lái)的響應(yīng)之后執(zhí)行
//該方法接收響應(yīng)對(duì)象(response object)作為參數(shù)蔽介，然后必須返回響應(yīng)對(duì)象或者 promise。響應(yīng)對(duì)象包括了請(qǐng)求配置(request configuration)煮寡，頭(headers)虹蓄，狀態(tài)(status)和從后臺(tái)過(guò)來(lái)的數(shù)據(jù)(data)。
response: function(response) {
// do something on response success
return response || $q.when(response);
},
//有時(shí)候我們后臺(tái)調(diào)用失敗了洲押，也有可能它被一個(gè)請(qǐng)求攔截器拒絕了或者被上一個(gè)響應(yīng)攔截器中斷了武花。在這種情況下，響應(yīng)異常攔截器可以幫助我們恢復(fù)后臺(tái)調(diào)用杈帐。
responseError : function(rejection) {
// do something on response error
return $q.reject(rejection);
}
};
}]);
注冊(cè)攔截工廠(chǎng)方法
app.config(["$httpProvider", function($httpProvider) {
$httpProvider.interceptors.push("httpInterceptor");
}]);
ionic里面view的緩存設(shè)置與清除
//設(shè)置視圖元素緩存到Dom中的數(shù)量体箕，默認(rèn)為10
$ionicConfigProvider.views.maxCache(10);
//將所有緩存的頁(yè)面清除
$ionicHistory.clearCache();
ionic里 ion-content標(biāo)簽的注意點(diǎn)
如果你給ion-content標(biāo)簽加了 下內(nèi)邊距(padding-bottom)，那么當(dāng)你的內(nèi)容區(qū)域可以滾動(dòng)時(shí)挑童，最下面的內(nèi)容將會(huì)展示不出來(lái)累铅，也就是向上滾動(dòng)不到可視區(qū)域，原因是：當(dāng)html被解析出來(lái)后站叼，ion-content里面會(huì)包一層 ion-scroll標(biāo)簽(前提是你不給ion-content設(shè)置 scroll="false"娃兽，因?yàn)樵O(shè)置了屬性scroll為false，ion-scroll將不會(huì)解析到html文檔里)尽楔，這個(gè)ion-scroll的最下方是跟ion-content的最下方的邊框挨著的投储，并不是跟ion-content的內(nèi)容區(qū)域的下邊界挨著。所以因?yàn)閜adding-bottom的緣故會(huì)顯示不全阔馋。
解決辦法
只需要給ion-content設(shè)置 margin-bottom即可
ion-modal的使用
ion-modal可以用來(lái)在當(dāng)前頁(yè)面彈出一個(gè)完整的頁(yè)面
使用方法
angular.module('testApp', ['ionic'])
//注入 $ionicModal
.controller('MyController', function($scope, $ionicModal) {
//用 fromTemplateUrl 引入modal 模板
$ionicModal.fromTemplateUrl('templates/modal.html', {
scope: $scope,//modal的作用域
animation: 'slide-in-up'//modal, 進(jìn)入的動(dòng)畫(huà)
focusFirstInput：true,//是否自動(dòng)對(duì)焦顯示模態(tài)的第一個(gè)輸入玛荞。只會(huì)在iOS上顯示鍵盤(pán)，強(qiáng)制鍵盤(pán)在Android上顯示呕寝，請(qǐng)使用Ionic鍵盤(pán)插件.插件地址在代碼片段下面勋眯。默認(rèn)值：false
backdropClickToClose：false,//是否關(guān)閉點(diǎn)擊背景幕的模式。默認(rèn)值：true下梢。
hardwareBackButtonClose：false客蹋，//使用Android和類(lèi)似設(shè)備上的硬件返回按鈕可以關(guān)閉模??態(tài)。默認(rèn)值：true孽江。
})
//返回一個(gè)promise
.then(function(modal) {
$scope.modal = modal;//把引入的modal賦值給當(dāng)前作用域下的變量
});
$scope.openModal = function() {
//如果modal沒(méi)有在顯示
if(!$scope.modal.isShow()){
$scope.modal.show();//顯示modal
}
};
$scope.closeModal = function() {
$scope.modal.hide();//隱藏modal
};
//當(dāng)我們用完模型時(shí)讶坯，清除它！
//因?yàn)槊看螐棾鰉odal都會(huì)在html中生成表示modal的標(biāo)簽岗屏，如果不手動(dòng)remove闽巩，下次再?gòu)棾鰜?lái)modal將會(huì)又生成一個(gè)代表modal的標(biāo)簽钧舌。
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// 當(dāng)隱藏模型時(shí)執(zhí)行動(dòng)作
$scope.$on('modal.hide', function() {
// 執(zhí)行動(dòng)作
});
// 當(dāng)移動(dòng)模型時(shí)執(zhí)行動(dòng)作
$scope.$on('modal.removed', function() {
// 執(zhí)行動(dòng)作
});
});
小提示：上面代碼中提到的Ionic鍵盤(pán)插件github地址Ionic鍵盤(pán)插件
ionic的ion-header-bar標(biāo)簽?zāi)J(rèn)是會(huì)在ios系統(tǒng)中騰出20像素的高度給status狀態(tài)欄的。
angular 自定義指令中 link涎跨、compile、controller的執(zhí)行順序
compile >>controller >> compile pre >> compile post >> link(沒(méi)有compile的情況崭歧。如果有compile隅很，那么link不會(huì)執(zhí)行)。
