Question

如何使用包装器指令验证requestDateFrom和requestDateTo（让我们称之为 drange ），这样只有当日期之间的距离等于1时，范围才有效？

<div ranger distance="1">
    <div>
        <div>
            <datepicker date-format="yyyy-MM-dd">
                <input required ng-model="formCtrl.dateFrom" name="requestDateFrom" type="text"/>
            </datepicker>                       
        </div>
        <div ng-messages="_form.requestDateFrom.$error" role="alert">
            <div ng-message="required">Enter start date</div>
        </div>
    </div>
    <!-- range end date.. the same markup -->
</div>

更新：提出解决方案

以下是我提出的建议：

https://jsfiddle.net/hfwpe1bw/38/

如您所见，我定义了三个指令：

游侠（检查日期距离）

function rangerDirective() {
    return {
        restrict: "A",
        scope: {distance: '@'},
        controller: function($scope) {
            var rangeStartConfig = null;
            var rangeEndConfig = null;

            this.rangeStartChanged = function(config) {
                rangeStartConfig = config;
                validateRange();
            };

            this.rangeEndChanged = function(config) {
                rangeEndConfig = config;
                validateRange();
            };

            function validateRange() {
                // check, set validity 
                rangeStartConfig.modelCtrl.$setValidity('range', isRangeValid);
                rangeEndConfig.modelCtrl.$setValidity('range', isRangeValid);
            }
        }
    }
}

范围开始（在游侠的控制器上调用 rangeStartChanged() ）
```
↓ see the example below
```

range-end （在游侠的控制器上调用 rangeEndChanged() ）

function rangeEndDirective() {
    return {
        require: ['^ranger', '^ngModel'],
        link: function(scope, element, attrs, controllers) {
            scope.$watch(attrs.rangeEndValue, function(newValue, oldValue) {
                controllers[0].rangeEndChanged({
                    newValue: newValue,
                    modelCtrl: controllers[1]
                });
            });
        }
    };
}

我不知道如何更好地做到这一点（让这个问题保持开放），它符合我的需要，但我不确定它是否不是hackish。

包装器指令内的日期范围验证。怎么做？

0 个答案: