angular my97时间控件 指令 封装使用

1.背景

my97 时间控件是非常强大咱们就不说了、在angular页面直接用my97是无法绑定ng-model的。那么咱们先简单把my97的用指令封装下。

2.先看下效果

3.封装指令

/** * 时间控件 my97 时间 by wwupower * my97Datepicker日期控在你选取日期后只是赋予了dom的value。 * 所有我们应该根据my97Datepicker oncleared 动态给ng-model赋值； */app.directive('powerDatePicker', function () {    return {        restrict: 'A',        require: 'ngModel',        scope:{            ngModel:"=",            dateConfig:"@",//支持my97的参数属性            onpickedCall:"&",//选择之后回调            onclearedCall:"&"//清除之后回调        },        controller:['$scope', '$http' ,'$timeout','$window','$location','$filter',function($scope, $http,$timeout,$window,$location,$filter){            //时间格式化过滤            $scope.$watch("ngModel",function (newValue, oldValue) {                             $scope.ngModel = $filter('date')(newValue,$scope.dateFmt);            });        }],        link: function (scope, element, attr, ngModel) {            scope.dateFmt = (attr.datefmt || 'yyyy-MM-dd HH');            element.val(ngModel.$viewValue);            function onpicking(dp) {                var date = dp.cal.getNewDateStr();                ngModel.$setViewValue(date);                if(typeof scope.onpickedCall=='function'){                    scope.onpickedCall();                }            }            function oncleared(){                ngModel.$setViewValue("");                if(typeof scope.oncleared=='function'){                    scope.oncleared();                }            }            element.bind('click', function () {                init97Date();            });            function init97Date(){                try{                    //my97 基本数据配置                    var wdateConfig = {                            onpicking: onpicking,                            oncleared: oncleared,                            dateFmt: scope.dateFmt                    };                    var config = "{"+scope.dateConfig+"}";                    var configObj = (new Function("return "+config))();                    if(configObj['onpicking']){                        delete configObj['onpicking'];                    }                    if(configObj['onpicking']){                        delete configObj['oncleared'];                    }                    //扩展my97属性                    wdateConfig = $.extend(wdateConfig,configObj);                    WdatePicker(wdateConfig)                }catch (e) {                    if(console){                        console.log(e);                    }                }            }        }    };});

4.指令使用

<input ng-model="queryObj.beginTime" id="dcsj" type="text" class="power-from-control power-input-date" power-date-picker />