layDate日期控件如何在Angularjs中使用
layDate日期控件如何在Angularjs中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站建设、网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的冷水滩网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
指令具体代码:
/** * 使用示例 * */ app .directive('defLaydate', function() { return { require: '?ngModel', restrict: 'A', scope: { ngModel: '=' }, link: function(scope, element, attr, ngModel) { var _date = null,_config={}; // 初始化参数 _config = { elem: '#' + attr.id, format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD', max:attr.hasOwnProperty('maxDate')?attr.maxDate:'', min:attr.hasOwnProperty('minDate')?attr.minDate:'', choose: function(data) { scope.$apply(setViewValue); }, clear:function(){ ngModel.$setViewValue(null); } }; // 初始化 _date= laydate(_config); // 模型值同步到视图上 ngModel.$render = function() { element.val(ngModel.$viewValue || ''); }; // 监听元素上的事件 element.on('blur keyup change', function() { scope.$apply(setViewValue); }); setViewValue(); // 更新模型上的视图值 function setViewValue() { var val = element.val(); ngModel.$setViewValue(val); } } } })
---以上代码使用示例为
注意:1.指令只能用做元素属性。2.元素必须要有唯一id属性。
到此为止,在Angularjs里使用laydate的基本目标实现了。但是,日期组件难免会有日期选择范围限制的要求,比如日期可选的最大值,最小值。现对指令做优化以满足要求:
app.directive('defLaydate', function() { return { require: '?ngModel', restrict: 'A', scope: { ngModel: '=', maxDate:'@', minDate:'@' }, link: function(scope, element, attr, ngModel) { var _date = null,_config={}; // 初始化参数 _config = { elem: '#' + attr.id, format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD', max:attr.hasOwnProperty('maxDate')?attr.maxDate:'', min:attr.hasOwnProperty('minDate')?attr.minDate:'', choose: function(data) { scope.$apply(setViewValue); }, clear:function(){ ngModel.$setViewValue(null); } }; // 初始化 _date= laydate(_config); // 监听日期最大值 if(attr.hasOwnProperty('maxDate')){ attr.$observe('maxDate', function (val) { _config.max = val; }) } // 监听日期最小值 if(attr.hasOwnProperty('minDate')){ attr.$observe('minDate', function (val) { _config.min = val; }) } // 模型值同步到视图上 ngModel.$render = function() { element.val(ngModel.$viewValue || ''); }; // 监听元素上的事件 element.on('blur keyup change', function() { scope.$apply(setViewValue); }); setViewValue(); // 更新模型上的视图值 function setViewValue() { var val = element.val(); ngModel.$setViewValue(val); } } } })
---以上代码使用示例为 min-date,max-date属性按需添加。
这样的指令一般情况下已经可以满足使用,但是在结合ngDialog使用时出现了问题:layDate在初始化中getElementById 获取元素时,弹窗中的html内容还没有持到页面的结点树中,故而报错。
于是希望指令的link代码可以在弹窗渲染后再执行,查找资料后,在指令中引入了$timeout:
app.directive('ngcLayDate', function($timeout) { return { require: '?ngModel', restrict: 'A', scope: { ngModel: '=', maxDate:'@', minDate:'@' }, link: function(scope, element, attr, ngModel) { var _date = null,_config={}; // 渲染模板完成后执行 $timeout(function(){ // 初始化参数 _config = { elem: '#' + attr.id, format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD', max:attr.hasOwnProperty('maxDate')?attr.maxDate:'', min:attr.hasOwnProperty('minDate')?attr.minDate:'', choose: function(data) { scope.$apply(setViewValue); }, clear:function(){ ngModel.$setViewValue(null); } }; // 初始化 _date= laydate(_config); // 监听日期最大值 if(attr.hasOwnProperty('maxDate')){ attr.$observe('maxDate', function (val) { _config.max = val; }) } // 监听日期最小值 if(attr.hasOwnProperty('minDate')){ attr.$observe('minDate', function (val) { _config.min = val; }) } // 模型值同步到视图上 ngModel.$render = function() { element.val(ngModel.$viewValue || ''); }; // 监听元素上的事件 element.on('blur keyup change', function() { scope.$apply(setViewValue); }); setViewValue(); // 更新模型上的视图值 function setViewValue() { var val = element.val(); ngModel.$setViewValue(val); } },0); } }; })
看完上述内容,你们掌握layDate日期控件如何在Angularjs中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前题目:layDate日期控件如何在Angularjs中使用
当前链接:http://scyanting.com/article/ghpggd.html