如何将一个指令中的一个值传递给另一个指令?

时间:2018-02-09 02:34:49

标签: angularjs

我有两个输入字段,其中包含 datetimepicker 指令。

<div class="row">
    <div class="col-xs-6">
        <label for="trainingStartDate">Start (Date and Time)</label>
        <input name="trainingStartDate"
               ng-model="Training.Start"
               id="trainingStartDate"
               datetimepicker
               class="form-control" />
    </div>

    <div class="col-xs-6">
        <label for="trainingEndDate">End (Date and Time)</label>
        <input name="trainingEndDate"
               ng-model="Training.End"
               id="trainingEndDate"
               datetimepicker
               class="form-control" />
    </div>
</div>

datetimepicker实现如下:

.directive('datetimepicker',
    function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: { 'ngModel': '=' },
            link: function (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: any) {
                    element.datetimepicker({
                        dateFormat: 'dd/mm/yy',
                        timeFormat: 'hh:mm TT',
                        minDate: 0,
                        hourMax: 23,

                        onSelect: function (datetime) {
                            controller.$setViewValue(datetime);
                            controller.$render();
                            scope.$apply();
                }
            });
        }
    }
});

基本上,该指令的作用是打开日期和时间选择器对象,并在选择时将日期和时间设置为viewValue(在本例中为Training.Start和Training.End)。

现在我的问题是当我尝试将另一个名为greaterThan的指令添加到 trainingEndDate 输入时,我得到一个错误,我的两个指令都不能有隔离的范围。

<div class="col-xs-6">
    <label for="trainingEndDate">End (Date and Time)</label>
    <input name="trainingEndDate"
           ng-model="Training.End"
           id="trainingEndDate"
           datetimepicker
           greater-than="{{ Training.Start }}"
           class="form-control" />
</div>

这是实现greaterThan指令的方式:

.directive('greaterThan',
    function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: { 'ngModel': '=' },
            link: function (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: any) {
                var validate = function (viewValue) {

                    if (!viewValue || !attributes.greaterThan) {
                        controller.$setValidity('greaterThan', true);
                    }
                    else {
                        var startDate = new Date(eval(attributes.greaterThan));
                        var endDate = new Date(viewValue);

                        controller.$setValidity('greaterThan', endDate > startDate);
                    }

                    return viewValue;
                };

                controller.$parsers.unshift(validate);
                controller.$formatters.push(validate);

                attributes.$observe('greaterThan', function (comparisonModel) {
                    return validate(controller.$viewValue);
                });
            }
        }
    });

我可以在输入字段中实现这两个指令吗?我需要使用greaterThan指令来检查viewValue(Training.End)是否小于Training.Start日期。在此先感谢您的帮助!

0 个答案:

没有答案