之前有写篇关于mobiscroll插件集成成angularjs指令到项目中使用
只说怎么集成到angular项目中作为指令来使用,但是有个问题:在页面时间控件上选择完时间后时间值却绑定不到ng-model中。这问题困扰我好久,最后还是得请大神出马解决。我这里也就只copy下代码以便以后好研究理解。当然要是哪位大神知道怎么理解的话请留言指导下,不胜感激!
/* * 时间轮盘选择器 */
m.directive('dateWheel',['dateFilter',function(dateFilter) {
return {
restrict: 'EA',replace: true,require: 'ngModel',scope: {
ngModel: "=",settings: "@",setStartDate : "@",callback: "&",intercept:"@"
},template: '<input type="text" mobiscroll-date="insideSettings" mobiscroll-instance="myInstance"/>',controller: ['$scope','$timeout',function($scope,$timeout) {
var settings = $scope.$parent.$eval($scope.settings);
$scope.insideSettings = angular.extend({
theme: "ios-7",lang: "zh",display: "bottom",mode: "datetimeDate",dateFormat: "yyyy-mm-dd",minDate: $scope.setStartDate
},settings,{
onBeforeShow: function(inst) {
// 设置初始值
if (angular.isNumber($scope.ngModel)) {
inst.setDate(new Date($scope.ngModel))
}
settings && settings.onBeforeShow && settings.onBeforeShow(inst);
},onSelect:function(ViewText,inst){
// $scope.ngModel = parseInt($scope.ngModel/36000000)*36000000;
if(!$scope.intercept)return;
switch ($scope.intercept){
case "d":
// $scope.vacation.planEndDate = new Date($scope.vacation.planEndDate).setHours(23,59,0);
// $scope.ngModel = parseInt($scope.ngModel/36000000/24)*36000000*24;
break;
case "h":
$scope.ngModel = parseInt($scope.ngModel/3600000)*3600000;
break;
case "m":
$scope.ngModel = parseInt($scope.ngModel/60000)*60000;
break;
default:
break;
}
inst.value = $scope.ngModel;
$scope.$apply();
},onHide: function(inst) {
if (angular.isFunction($scope.callback())) {
$scope.callback()($scope.ngModel);
}
settings && settings.onHide && settings.onHide(inst);
}
});
if (!!$scope.$parent.$eval($scope.setStartDate)) {
$scope.insideSettings.minDate = new Date();
}
// 接受broadcast下来的数据和事件 更新数据
$scope.$on('mobiscroll-dateWheel-clear',function() {
$timeout(function() {
$scope.myInstance.clear();
})
});
}],link: function($scope,element,attrs,ngModel) {
ngModel.$parsers.push(function(value) {
return angular.isDate(value) ? value.getTime() : value;
});
ngModel.$formatters.push(function(value) {
if (angular.isNumber(value)) {
element.val(dateFilter(value,$scope.insideSettings.dateFormat.replace(/m/g,"M")));
}
return value;
});
}
};
}]);
而在页面中则:
<input type="text" name='plannedBeginTime' date-wheel placeholder="请选择计划开始时间"
ng-model="vacation.planStartDate" data-intercept='d' data-callback="callback" required/>
当然在总控制器中还得依赖 mobiscroll-datetime
onSelect:function(TextValue,inst){}函数作用是在选择完时间后,在控件上显示时间改成整点整分。这个根据需要来,如果不需要改的话可以把这个函数去掉。