Question

我想创建一个检查null的指令输入html日期字段，如果它为null，则将其重置为当前日期。我可以毫不费力地用ng-change进行检查。

HTML code：

 <input type="date" class="form-control" id="birthDate"
                 ng-model="vm.bDate" ng-change="vm.dateValid(vm.bDate)">

控制器中的代码：

  function dateValid(date) {
  vm.bDate = date || new Date();
}

这段代码工作得很好，但由于我的应用程序中有很多日期字段，我希望用指令获得完全相同的结果。

所以我实现了一个指令：

  $element.on('blur', function () {
  var pDate = Date.parse($ctrl.$modelValue);
  if (isNaN(pDate) === true) {
    $ctrl.$setViewValue(new Date());
    $ctrl.$render();
  }
});

和html：

 <input type="date" class="form-control" id="birthDate" valid-date=""
                 ng-model="vm.bDate">

当日期为空时，就像我擦除年份一样，我在控制台中收到错误：

指定值＆＃34; Sun Sep 18 2016 21:41:34 GMT + 0300（耶路撒冷日光时间）＆＃34;不符合要求的格式，＆＃34; yyyy-MM-dd＆＃34;。

重置日期字段的适当方法是什么？

感谢名单

Answer 1

您不需要指令，只需使用ng-blur验证您的输入：

HTML

<input type="date" 
       class="form-control" 
       id="birthDate2"
       ng-model="vm.bDate" 
       ng-blur="vm.dateValid()">

JS

app.controller('MainCtrl', function($scope) {
  var vm = this;

  vm.bDate = new Date();

  vm.dateValid = function () {
    vm.bDate = vm.bDate || new Date();
  }
});

plunker：http://plnkr.co/edit/32Ny4rnPreK2dGC5GMFo?p=preview

Answer 2

指令解决方案：

app.directive('validDate', function ($timeout) {
  return {
    scope: {
      ngModel: '='
    },
    bindToController: true,
    controllerAs: 'vm',
    link: function (scope, element, attrs, ctrl) {
      element.on('blur', function () {
        // using timeout instead of scope.$apply, notify angular of changes
        $timeout(function () {
          ctrl.ngModel = ctrl.ngModel || new Date();
        });
      });
    }, 
    controller: function () {}
  }
});

HTML：

<input type="date" 
       class="form-control" 
       id="birthDate2"
       ng-model="vm.bDate" 
       valid-date>

使用两个答案更新了plunker：http://plnkr.co/edit/32Ny4rnPreK2dGC5GMFo?p=preview

另一个指令，它将ng-blur添加到元素

JS

app.directive('vd', function ($compile) {
  return {
    link: function (scope, element) {
      element.attr('ng-blur', 'vm.dateValid()');
      $compile(element)(scope);
    }
  }
});

HTML

<input type="date" 
       class="form-control" 
       id="birthDate2"
       ng-model="vm.bDate" 
       vd>

plunker：http://plnkr.co/edit/U9KtoffbnCXNeAWcWLEC?p=preview

用于日期验证的角度指令

2 个答案: