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 />