layDate 控件地址：http://laydate.layui.com/
前情：原來系統中使用的日期控件是UI bootstrap（地址：https://angular-ui.github.io/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，問題解決。解決問題的過程伴隨著查資料的過程，是一步步完善的。也希望大家在遇到同樣的問題時少走彎路
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
