最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Angularjs中使用layDate日期控件示例
时间:2017-01-15 编辑:简简单单 来源:一聚教程网
layDate 控件地址:http://laydate.layui.com/
前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的。后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件。
解决思路:将layDate的初始化及相关代码定义在指令里。
问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值。
指令具体代码:
代码如下 | 复制代码 |
/** * 使用示例 * */ 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();
// 更新模型上的视图值 functionsetViewValue() { varval = 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();
// 更新模型上的视图值 functionsetViewValue() { varval = 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();
// 更新模型上的视图值 functionsetViewValue() { varval = element.val(); ngModel.$setViewValue(val); } },0); } }; }) |
OK,问题解决。解决问题的过程伴随着查资料的过程,是一步步完善的。也希望大家在遇到同样的问题时少走弯路
-
上一个: html web打印小结
-
下一个: 2017年网页设计的十大趋势
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31