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

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值