Question

我正在构建一个指令，为输入[＆＃39; date＆＃39;]元素添加一些逻辑。这就是我现在所拥有的：

app.directive('calendarInput', function() {
    'use strict';
    return {
        template : '<input type="date"' +
                            'ng-model="calendarInput"' +
                            'min="{{min}}"' +
                            'max="{{max}}" />'
        replace: true,
        scope: {
            startdate : '@',
            enddate : '@',
            calendarInput: '='
        },
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch('startdate', function (val) {
                if (val) {
                    var date = new Date(val);
                    scope.min = date.toIsoString().split('T')[0];
                }
            });
            scope.$watch('enddate', function (val) {
                if (val) {
                    var date = new Date(val);
                    scope.max = date.toIsoString().split('T')[0];
                }
            });
        }
    };
});

我们的想法是重用这个指令。有时会有一个startdate，有时只有enddate。像这样：

<div calendar-input="item.birthday" enddate="'1990-01-01'"></div>

不幸的是，这总是导致类ng-invalid-min的表单无效。这是因为我没有提供startdate参数。

如何将min或max值设为可选？

编辑：我正在使用Angular 1.3.9

Answer 1

想出了一种按需编译max和min属性的方法。

app.directive('calendarInput', function($compile) {
    'use strict';
    return {
        template : '<input type="date" class="datepicker" ng-model="omdCalendarInput" />',
        replace: true,
        scope: {
            startdate : '@',
            enddate : '@',
            calendarInput: '='
        },
        restrict: 'CA',
        link: function (scope, element, attrs) {

            var dateInput = element.find('input') // <----

            scope.$watch('startdate', function (val) {
                if (val) {
                    var date = new Date(val);
                    scope.min = date.toIsoString().split('T')[0];
                    if (!dateInput.attr('min')) { // <----
                        dateInput.attr('min', '{{min}}'); // <----
                        $compile(dateInput)(scope); // <----
                    }
                }
            });
            scope.$watch('enddate', function (val) {
                if (val) {
                    var date = new Date(val);
                    scope.max = date.toIsoString().split('T')[0];
                    if (!dateInput.attr('max')) { // <----
                        dateInput.attr('max', '{{max}}'); // <----
                        $compile(dateInput)(scope); // <----
                    }
                }
            });
        }
    };
});

Relevant Link

编辑：改进了上面的代码。此外，我将此标记为正确答案，因为没有其他人有解决方案。

Answer 2

This is great, just what I needed。谢谢。

Nit-pick - 可能想要改变：

scope.min = date.toIsoString().split('T')[0];

到

scope.min = $format('date')(date, 'yyyy-MM-dd');

使它更有棱角。

具有可选最大最小值的角度输入验证始终无效

2 个答案: