laydate 控件地址：
前情：原来系统中使用的日期控件是ui bootstrap（地址：）里的。后来因为各种原因，要换掉ui bootstrap中的日期控件，改用laydate日期控件。
解决思路：将laydate的初始化及相关代码定义在指令里。
问题关键点：laydate操作的是html元素的,怎么实现双向绑定，同步angularjs模板值和html的元素值。
指令具体代码:
我要评论
/**
* 使用示例
* <input def-laydate type="text" id="id1" ng-model="starttime"/>
*/
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);
}
}
}
})
---以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="starttime"/>
注意：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);
}
}
}
})
---以上代码使用示例为 <input def-laydate type="text" id="id1" ng-model="starttime" max-date="{{model.max}}" min-date="{{model.min}}"/> 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);
}
};
})
ok，问题解决。解决问题的过程伴随着查资料的过程，是一步步完善的。也希望大家在遇到同样的问题时少走弯路
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论