前情：原来系统中使用的日期控件是UI bootstrap（地址：）里的。后来因为各种原因，要换掉UI bootstrap中的日期控件，改用layDate日期控件。
问题关键点：layDate操作的是Html元素的,怎么实现双向绑定，同步Angularjs模板值和Html的元素值。
指令具体代码:
rush:js;">
/**
* 使用示例
* cope: {
ngModel: '='
},link: function(scope,element,attr,ngModel) {
var _date = null,_config={};
// 初始化参数
_con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a> = {
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) {
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$apply(setViewValue);
},clear:function(){
ngModel.$setViewValue(null);
}
};
// 初始化
_date= laydate(_con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>);
// 模型值同步到视图上
ngModel.<a href="https://www.jb51.cc/tag/render/" target="_blank" class="keywords">$render</a> = function() {
element.val(ngModel.$viewValue || '');
};
// 监听元素上的事件
element.on('blur keyup change',function() {
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$apply(setViewValue);
});
setViewValue();
// 更新模型上的视图值
function setViewValue() {
var val = element.val();
ngModel.$setViewValue(val);
}
}
}
})---以上代码使用示例为
注意：
1.指令只能用做元素属性。2.元素必须要有唯一id属性。到此为止，在Angularjs里使用laydate的基本目标实现了。但是，日期组件难免会有日期选择范围限制的要求,比如日期可选的最大值，最小值。现对指令做优化以满足要求：
rush:js;">
app.directive('defLaydate',scope: {
ngModel: '=',maxDate:'@',minDate:'@'
},clear:function(){
ngModel.$setViewValue(null);
}
};
// 初始化
_date= laydate(_config);
// 监听日期最大值
if(attr.hasOwnProperty('maxDate')){
attr.$observe('maxDate',function (val) {
_con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>.max = val;
})
}
// 监听日期最小值
if(attr.hasOwnProperty('minDate')){
attr.$observe('minDate',function (val) {
_con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>.min = val;
})
}
// 模型值同步到视图上
ngModel.<a href="https://www.jb51.cc/tag/render/" target="_blank" class="keywords">$render</a> = function() {
element.val(ngModel.$viewValue || '');
};
// 监听元素上的事件
element.on('blur keyup change',function() {
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$apply(setViewValue);
});
setViewValue();
// 更新模型上的视图值
function setViewValue() {
var val = element.val();
ngModel.$setViewValue(val);
}
}
}
})这样的指令一般情况下已经可以满足使用，但是在结合ngDialog使用时出现了问题：layDate在初始化中getElementById 获取元素时，弹窗中的html内容还没有持到页面的结点树中，故而报错。
于是希望指令的link代码可以在弹窗渲染后再执行，查找资料后，在指令中引入了$timeout:
rush:js;">
app.directive('ngcLayDate',function($timeout) {
return {
require: '?ngModel',_config={};
// 渲染模板完成后执行
$timeout(function(){
// 初始化参数
_config = {
elem: '#' + attr.id,choose: function(data) {
scope.$apply(setViewValue);
},clear:function(){
ngModel.$setViewValue(null);
}
};
// 初始化
_date= laydate(_con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>);
// 监听日期最大值
if(attr.hasOwnProperty('maxDate')){
attr.$observe('maxDate',function (val) {
_con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>.max = val;
})
}
// 监听日期最小值
if(attr.hasOwnProperty('minDate')){
attr.$observe('minDate',function (val) {
_con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>.min = val;
})
}
// 模型值同步到视图上
ngModel.<a href="https://www.jb51.cc/tag/render/" target="_blank" class="keywords">$render</a> = function() {
element.val(ngModel.$viewValue || '');
};
// 监听元素上的事件
element.on('blur keyup change',function() {
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$apply(setViewValue);
});
setViewValue();
// 更新模型上的视图值
function setViewValue() {
var val = element.val();
ngModel.$setViewValue(val);
}
},0);
}
};
})OK，问题解决。解决问题的过程伴随着查资料的过程，是一步步完善的。也希望大家在遇到同样的问题时少走弯路
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
