【问题标题】:angular 1.3.0 and input[type=string]角度 1.3.0 和输入 [type=string]
【发布时间】:2016-07-02 04:01:15
【问题描述】:

我们最近更新了我们的应用程序以使用最新的 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 只是因为它被绑定了一个“文本”类型的输入而决定更改范围值,即使输入中的值从未被触及。

我不想使用 input[type=text] 因为我不希望浏览器强制自己处理日期。

如果我的格式化程序/解析器会被调用,我会知道如何解决这个问题,但这让我感到困惑。

我可以只显示一个跨度的日期,并有一个用户可以单击以生成 pikaday 插件的按钮,但我希​​望行为保持原样......

【问题讨论】:

    标签: angularjs angular-directive


    【解决方案1】:

    您是否从 https://github.com/angular-ui/bootstrap/issues/2659 看到过这种解决方法?

    你所要做的就是添加一个指令:

    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();
       }
     }
    })
    

    Workaround 删除了 1.3.0 版本引入的不太好的工作格式化程序,从而解决了它的问题。

    这个修复应该会成功,因为它在 github 线程中得到了广泛的感谢。

    【讨论】:

    • 谢谢米科。我已将它添加到我的 pikaday 指令的链接功能的开头。奇迹般有效。遗憾的是,我们必须修补 Angular 才能使其正常工作。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-26
    • 2023-04-02
    • 1970-01-01
    • 2020-06-22
    • 2023-02-25
    • 1970-01-01
    • 2021-12-06
    相关资源
    最近更新 更多