Директива для сравнения двух дат

Question

Я использовал следующий код для директивы, которая сравнивает две даты ( обратитесь к директиве проверки пользовательской формы для сравнения двух полей)

define(['./module'], function(directives) {
'use strict';
directives.directive('lowerThan', [
 function() {

   var link = function($scope, $element, $attrs, ctrl) {
   ctrl.$setValidity('lowerThan', false);
   var validate = function(viewValue) {
    var comparisonModel = $attrs.lowerThan;                

    /*if(!viewValue || !comparisonModel){
      // It's valid because we have nothing to compare against
      //console.log("It's valid because we have nothing to compare against");
      ctrl.$setValidity('lowerThan', true);
    }*/

    // It's valid if model is lower than the model we're comparing against
    //ctrl.$setValidity('lowerThan', parseInt(viewValue, 10) <    parseInt(comparisonModel, 10) );        
    if(comparisonModel){       
        var to = comparisonModel.split("-");        
        var t = new Date(to[2], to[1] - 1, to[0]);
    }
    if(viewValue){
      var from=viewValue.split("-");
      var f=new Date(from[2],from[1]-1,from[0]);
    }

    console.log(Date.parse(t)>Date.parse(f));
    ctrl.$setValidity('lowerThan', Date.parse(t)>Date.parse(f));        
    return viewValue;
  };

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

  $attrs.$observe('lowerThan', function(comparisonModel){
    // Whenever the comparison model changes we'll re-validate
    return validate(ctrl.$viewValue);
  });

};

return {
  require: 'ngModel',
  link: link
};

 }
 ]);
 });

но при первой загрузке страницы отображается сообщение об ошибке. я попытался с помощью Ctrl.$setValidity('lowerThan', false); сделать его невидимым в первый раз. Но это не работает.

Вот плункер для того же. http://plnkr.co/edit/UPN1g1JEoQMSUQZoCDAk?p=preview

Answer 1

Ваша директива в порядке. Вы устанавливаете свои значения даты внутри контроллера, и вы устанавливаете более низкую дату на более высокое значение, что означает, что даты недопустимы при загрузке. Ваша директива правильно обнаруживает это. Если вы не хотите, чтобы ваша директива проверяла ваши данные при загрузке, вам понадобятся три вещи:

1. Удалите $attrs.$ Наблюдать

2. Создать и применить higherThan директива к другому полю

3. Скажите вашей директиве не применять к значению модели (массив $formatters), а только к входному значению (массив $parsers).

PLUNKER

'use strict';
var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.field = {
    min: "02-04-2014",
    max: "01-04-2014"
  };

});

app.directive('lowerThan', [
  function() {

    var link = function($scope, $element, $attrs, ctrl) {

      var validate = function(viewValue) {
        var comparisonModel = $attrs.lowerThan;
        var t, f;

        if(!viewValue || !comparisonModel){
          // It's valid because we have nothing to compare against
          ctrl.$setValidity('lowerThan', true);
        }
        if (comparisonModel) {
            var to = comparisonModel.split("-");
            t = new Date(to[2], to[1] - 1, to[0]);
        }
        if (viewValue) {
            var from = viewValue.split("-");
            f = new Date(from[2], from[1] - 1, from[0]);
        }

        ctrl.$setValidity('lowerThan', Date.parse(t) > Date.parse(f));
        // It's valid if model is lower than the model we're comparing against

        return viewValue;
      };

      ctrl.$parsers.unshift(validate);
      //ctrl.$formatters.push(validate);

    };

    return {
      require: 'ngModel',
      link: link
    };

  }
]);

app.directive('higherThan', [
  function() {

    var link = function($scope, $element, $attrs, ctrl) {

      var validate = function(viewValue) {
        var comparisonModel = $attrs.higherThan;
        var t, f;

        if(!viewValue || !comparisonModel){
          // It's valid because we have nothing to compare against
          ctrl.$setValidity('higherThan', true);
        }
        if (comparisonModel) {
            var to = comparisonModel.split("-");
            t = new Date(to[2], to[1] - 1, to[0]);
        }
        if (viewValue) {
            var from = viewValue.split("-");
            f = new Date(from[2], from[1] - 1, from[0]);
        }

        ctrl.$setValidity('higherThan', Date.parse(t) < Date.parse(f));
        // It's valid if model is higher than the model we're comparing against

        return viewValue;
      };

      ctrl.$parsers.unshift(validate);
      //ctrl.$formatters.push(validate);

    };

    return {
      require: 'ngModel',
      link: link
    };

  }
]);

<form name="form" >

  Min: <input name="min" type="text" ng-model="field.min" lower-than="{{field.max}}" />
  <span class="error" ng-show="form.min.$error.lowerThan">
    Min cannot exceed max.
  </span>

  <br />

  Max: <input name="max" type="text" ng-model="field.max" higher-than="{{field.min}}" />
  <span class="error" ng-show="form.max.$error.higherThan">
    Max cannot be lower than min.
  </span>

</form>