关于mobiscroll时间控件没能正常绑定值问题

来源：互联网发布：access 输入数据编辑：程序博客网时间：2024/04/30 15:03

之前有写篇关于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,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){}函数作用是在选择完时间后，在控件上显示时间改成整点整分。这个根据需要来，如果不需要改的话可以把这个函数去掉。

0 0