发表于： 2017-06-18 22:42:10
1 805
今天完成的事情:
Angular指令封装jQuery日期时间插件，并实现双向绑定
直接上代码：
在export class下面
angular.module("directives",[]).directive("datetimepicker",function(){
return {
restrict: "EA", //指令作用范围是element或attribute
require : "ngModel", //控制器是指令标签对应的ngModel
link: function (scope, element, attrs, ctrl) {
var unregister = scope.$watch(function(){
$(element).append("<input id='date-"+attrs.dateid+"' style='border:none;width:100%' value='"+ctrl.$modelValue+"'>"); //template用不好，于是用这个笨办法加上input标签
element.on('change', function() { //注册onChange事件，设置viewValue
scope.$apply(function() {
ctrl.$setViewValue($("#date-"+attrs.dateid).val());
});
});
element.on('click',function(){ //click触发日期框
$("#date-"+attrs.dateid).datetimepicker({
format : attrs.format || 'Y/m/d h:i', //格式
onClose : function(){ //关闭日期框时手动触发change事件
element.change();
}
});
});
element.click(); //第一次绑定事件，模拟一次click，否则肯能要点两下才会出日期框
return ctrl.$modelValue;
}, initialize);
function initialize(value){
ctrl.$setViewValue(value);
unregister();
}
}
}
});
constructor下面写上
moment.locale('zh-cn')设置为中文
明天计划的事情：
继续学习angular
问题：
大坑：Angular初始化一个ngModel的时候，是会先给它的value置为NaN，初始化必须要先调用$watch()来监测真正值被设置的时候，然后调用上面的initialize方法来设置view值。否则在Controller中设置的初始值会变成NaN。
收获：
如上
返回列表
评论