angular 1.3.0 和输入[type=string]
angular 1.3.0 and input[type=string]
我们最近更新了我们的应用程序以使用最新的 angular 版本,从 1.3.0 之前的版本到 1.5.0。显然我们现在遇到了 1.3.0 中引入的重大变化:
https://github.com/angular/angular.js/issues/9218
我们有一个自定义指令,使我们能够使用 pikaday 日期选择器:
module.directive('pikaday', function () {
return {
require: 'ngModel',
link: function preLink(scope, element, attrs, controller) {
var $element = $(element),
momentFormat = 'DD/MM/YYYY',
year = new Date().getFullYear();
// init datepicker
var picker = new Pikaday(
{
field: document.getElementById(attrs.id),
firstDay: 1,
format: momentFormat,
minDate: new Date((year - 1) + '-01-01'),
maxDate: new Date((year + 1) + '-12-31'),
yearRange: [year - 1, year + 1],
onSelect: function (date) {
controller.$setViewValue(date);
},
defaultDate: scope.$eval(attrs.ngModel), // require: 'ngModel'
setDefaultDate: true
});
// format model values to view
controller.$formatters.unshift(function (modelValue) {
var formatted = (modelValue)
? moment(modelValue).format(momentFormat)
: modelValue;
return formatted;
});
// parse view values to model
controller.$parsers.unshift(function (viewValue) {
if (viewValue instanceof Date) {
return viewValue;
}
else {
return moment(viewValue, momentFormat).toDate();
}
});
}
};
})
这过去工作正常,但现在在绑定一个具有此控件的表单后,我的范围值突然从 Date 对象更改为字符串(从未与控件交互!)有趣的是,这在没有调用格式化程序或解析器的情况下发生。所以看起来 angular 只是决定更改范围值只是因为它被绑定到类型 "text" 的输入,即使输入中的值从未被触及。
我不想使用输入[type=text],因为我不想让浏览器强制自己处理日期。
如果我的 formatter/parser 被调用,我会知道如何解决这个问题,但这让我感到困惑。
我可以只在一个范围内显示一个日期,并有一个按钮,用户可以单击该按钮来生成 pikaday 插件,但我更希望该行为保持原样...
您是否从 https://github.com/angular-ui/bootstrap/issues/2659 看到了这个解决方法?
All you have to do is add a directive:
directive('datepickerPopup', function (){
return {
restrict: 'EAC',
require: 'ngModel',
link: function(scope, element, attr, controller) {
//remove the default formatter from the input directive to prevent conflict
controller.$formatters.shift();
}
}
})
变通方法删除了 1.3.0 版本引入的不太好用的格式化程序,从而解决了它的问题。
此修复应该会成功,因为它在 github 线程中受到了广泛的感谢。
我们最近更新了我们的应用程序以使用最新的 angular 版本,从 1.3.0 之前的版本到 1.5.0。显然我们现在遇到了 1.3.0 中引入的重大变化:
https://github.com/angular/angular.js/issues/9218
我们有一个自定义指令,使我们能够使用 pikaday 日期选择器:
module.directive('pikaday', function () {
return {
require: 'ngModel',
link: function preLink(scope, element, attrs, controller) {
var $element = $(element),
momentFormat = 'DD/MM/YYYY',
year = new Date().getFullYear();
// init datepicker
var picker = new Pikaday(
{
field: document.getElementById(attrs.id),
firstDay: 1,
format: momentFormat,
minDate: new Date((year - 1) + '-01-01'),
maxDate: new Date((year + 1) + '-12-31'),
yearRange: [year - 1, year + 1],
onSelect: function (date) {
controller.$setViewValue(date);
},
defaultDate: scope.$eval(attrs.ngModel), // require: 'ngModel'
setDefaultDate: true
});
// format model values to view
controller.$formatters.unshift(function (modelValue) {
var formatted = (modelValue)
? moment(modelValue).format(momentFormat)
: modelValue;
return formatted;
});
// parse view values to model
controller.$parsers.unshift(function (viewValue) {
if (viewValue instanceof Date) {
return viewValue;
}
else {
return moment(viewValue, momentFormat).toDate();
}
});
}
};
})
这过去工作正常,但现在在绑定一个具有此控件的表单后,我的范围值突然从 Date 对象更改为字符串(从未与控件交互!)有趣的是,这在没有调用格式化程序或解析器的情况下发生。所以看起来 angular 只是决定更改范围值只是因为它被绑定到类型 "text" 的输入,即使输入中的值从未被触及。
我不想使用输入[type=text],因为我不想让浏览器强制自己处理日期。
如果我的 formatter/parser 被调用,我会知道如何解决这个问题,但这让我感到困惑。
我可以只在一个范围内显示一个日期,并有一个按钮,用户可以单击该按钮来生成 pikaday 插件,但我更希望该行为保持原样...
您是否从 https://github.com/angular-ui/bootstrap/issues/2659 看到了这个解决方法?
All you have to do is add a directive:
directive('datepickerPopup', function (){
return {
restrict: 'EAC',
require: 'ngModel',
link: function(scope, element, attr, controller) {
//remove the default formatter from the input directive to prevent conflict
controller.$formatters.shift();
}
}
})
变通方法删除了 1.3.0 版本引入的不太好用的格式化程序,从而解决了它的问题。
此修复应该会成功,因为它在 github 线程中受到了广泛的感谢。