ionic常用插件——日期选择
效果图如下：
Paste_Image.png
1、先导入ionic-datepicker.bundle.min 这个JS文件。
2、在app.js文件中启动模块注入’ionic-datepicker’
3、页面代码：
<label class="item item-input">
<span class="input-label">服务日期：</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 设置了隐藏横向滚动条无效
情景重现：
<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)">发现
</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 设置了属性scrollbar-x="false"，但是在浏览器观看效果时，还是会出现横向滚动条，在浏览器里查看ion-scroll的属性时，class属性 是：class=" scroll-view ionic-scroll scroll-x",
浏览器里的样式
当我在代码里给 ion-scroll 手动加一个 style="overflow:hidden;"后，问题就解决了。。。。
实现长按复制文字
html部分
给想要长按复制的标签添加属性 data-tap-disabled="true"
css部分
给改元素添加样式 -webkit-user-select: text !important;user-select: text !important;
原理
data-tap-disabled 属性是禁用ionic的tap处理机制，user-select: text 是让元素恢复可选择。ionic的滚动条是监听tap事件的，必须加上了 data-tap-disabled="true" 使ionic停止监听该元素的tap事件，这样该元素才会触发原生的长按事件。
来源：简书
ionic监测app是否在后台运行
$ionicPlatform.on('pause',function () {
console.log("app进入后台运行");
});
$ionicPlatform.on('resume',function () {
console.log("app进入前台运行");
});
$ionicpopup定制样式
无论是调用$ionicPopup下面的 alert(), prompt(), and confirm()都可以传一个对象当做参数。如：
{
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;
}
}]
}
很关键的一个属性是 cssClass，这里定义的class类名将会添加到弹出框的最外层的div上，然后只要把自己想要定制的样式写进在css或者sass里面就可以了，
详细信息请查看官网网址:$ionicPopup详细使用说明
angular关于http拦截器
angularJs通过拦截器提供了一个从全局层面对http请求进行处理的途径。
拦截服务工厂
var app = angular.module("ajaxHttp", []);
app.factory("httpInterceptor", [ "$q", "$rootScope", function($q, $rootScope) {
return {
//该方法会在 $http 发送请求后台之前执行
//该方法接收请求配置对象(request configuration object)作为参数，然后必须返回配置对象或者 promise 。
request: function(config) {
// do something on request success
return config || $q.when(config);
},
//该方法会俘获那些被上一个请求拦截器中断的请求
requestError: function(rejection) {
// do something on request error
return $q.reject(rejection)
},
//该方法会在 $http 接收到从后台过来的响应之后执行
//该方法接收响应对象(response object)作为参数，然后必须返回响应对象或者 promise。响应对象包括了请求配置(request configuration)，头(headers)，状态(status)和从后台过来的数据(data)。
response: function(response) {
// do something on response success
return response || $q.when(response);
},
//有时候我们后台调用失败了，也有可能它被一个请求拦截器拒绝了或者被上一个响应拦截器中断了。在这种情况下，响应异常拦截器可以帮助我们恢复后台调用。
responseError : function(rejection) {
// do something on response error
return $q.reject(rejection);
}
};
}]);
注册拦截工厂方法
app.config(["$httpProvider", function($httpProvider) {
$httpProvider.interceptors.push("httpInterceptor");
}]);
ionic里面view的缓存设置与清除
//设置视图元素缓存到Dom中的数量，默认为10
$ionicConfigProvider.views.maxCache(10);
//将所有缓存的页面清除
$ionicHistory.clearCache();
ionic里 ion-content标签的注意点
如果你给ion-content标签加了 下内边距(padding-bottom)，那么当你的内容区域可以滚动时，最下面的内容将会展示不出来，也就是向上滚动不到可视区域，原因是：当html被解析出来后，ion-content里面会包一层 ion-scroll标签(前提是你不给ion-content设置 scroll="false"，因为设置了属性scroll为false，ion-scroll将不会解析到html文档里)，这个ion-scroll的最下方是跟ion-content的最下方的边框挨着的，并不是跟ion-content的内容区域的下边界挨着。所以因为padding-bottom的缘故会显示不全。
解决办法
只需要给ion-content设置 margin-bottom即可
ion-modal的使用
ion-modal可以用来在当前页面弹出一个完整的页面
使用方法
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, 进入的动画
focusFirstInput：true,//是否自动对焦显示模态的第一个输入。只会在iOS上显示键盘，强制键盘在Android上显示，请使用Ionic键盘插件.插件地址在代码片段下面。默认值：false
backdropClickToClose：false,//是否关闭点击背景幕的模式。默认值：true。
hardwareBackButtonClose：false，//使用Android和类似设备上的硬件返回按钮可以关闭模态。默认值：true。
})
//返回一个promise
.then(function(modal) {
$scope.modal = modal;//把引入的modal赋值给当前作用域下的变量
});
$scope.openModal = function() {
//如果modal没有在显示
if(!$scope.modal.isShow()){
$scope.modal.show();//显示modal
}
};
$scope.closeModal = function() {
$scope.modal.hide();//隐藏modal
};
//当我们用完模型时，清除它！
//因为每次弹出modal都会在html中生成表示modal的标签，如果不手动remove，下次再弹出来modal将会又生成一个代表modal的标签。
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// 当隐藏模型时执行动作
$scope.$on('modal.hide', function() {
// 执行动作
});
// 当移动模型时执行动作
$scope.$on('modal.removed', function() {
// 执行动作
});
});
小提示：上面代码中提到的Ionic键盘插件github地址Ionic键盘插件
ionic的ion-header-bar标签默认是会在ios系统中腾出20像素的高度给status状态栏的。
angular 自定义指令中 link、compile、controller的执行顺序
compile >>controller >> compile pre >> compile post >> link(没有compile的情况。如果有compile，那么link不会执行)。
网友评论