Question

我正在制作一个日期范围角度指令。这使用两个ui.bootstrap日期选择器作为开始和结束日期。

我正在观看开始和结束日期，如果其中一个选定日期超过另一个日期超过3个月，则会调整它们。

模型正确更新，因为我可以看到它们在直接打印到屏幕时会更新，但文本字段中的日期不会。

我的猜测是文本字段日期与模型没有直接关联，需要运行一个函数来更新文本字段。

下面给出了示例指令代码，它在plunker中起作用。

var app = angular.module('app', ['ui.bootstrap']);
app.directive("dateRange", function() {
  return {
    restrict: "A",
    templateUrl: "date-range.html",
    controller: [
      "$scope",
      "$attrs",
      "$element",
      function($scope, $attrs, $element) {
        // Watch the start/end dates for external changes.
        // If they get too far apart, modify the other date to bring it inline.
        $scope.$watch("dateRange.start", function(startDate) {
          var max = new Date(startDate);
          max.setMonth(startDate.getMonth() + 3);
          if ($scope.dateRange.end.getTime() > max.getTime()) {
            $scope.dateRange.end.setTime(max.getTime());
          }
        });
        $scope.$watch("dateRange.end", function(endDate) {
          var min = new Date(endDate);
          min.setMonth(endDate.getMonth() - 3);
          if ($scope.dateRange.start.getTime() < min.getTime()) {
            $scope.dateRange.start.setTime(min.getTime());
          }
        });
        $scope.dateRange = {
          start: (function() {
            var date = new Date();
            date.setMonth(date.getMonth() - 1);
            return date;
          })(),
          end: new Date(),
        };
      }
    ]
  };
});

app.directive("datePicker", function() {
  return {
    restrict: "A",
    scope: {
      model: "=model",
      label: "@label"
    },
    templateUrl: "date-picker.html",
    controller: [
      "$scope",
      "$attrs",
      "$element",
      function($scope, $attrs, $element) {
        $scope.open = function($event) {
          $event.preventDefault();
          $event.stopPropagation();

          $scope.opened = true;
        };
        $scope.format = "dd-MM-yyyy";
      }
    ]
  };
});

Answer 1

我已经编写了一份指令，可以为您提供如何使用AngularJS内置服务 $ parse 并注入ngModel来大大简化您的尝试的提示控制器。

app.directive('coupledDate', ['$parse',
    function ($parse) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, ngModelCtrl) {
                if(attrs.difference){
                    scope.$watch(attrs.dateFrom, function (newValue, oldValue, scope) {
                        var future = moment(newValue).add('d', Number(scope.$eval(attrs.difference))).toDate();
                        $parse(attrs.ngModel).assign(scope, future);
                    });
                }
                //Validation Part:
                element.on('blur', function () {
                    scope.$apply(function () {
                        var from = moment(scope.$eval(attrs.dateFrom));
                        var till = moment(scope.$eval(attrs.ngModel));
                        ngModelCtrl.$setValidity('date', from.isBefore(till));
                    });
                });
            }
        };
    }
]);

将此指令应用于Datepicker字段时，它将在使用 date-from 标记指定的作用域上观察变量，并添加差异指定的天数标签。进一步的可能性包括验证等。该指令使用了moment.js。

作为预览，我为您创建了一个plunker http://plnkr.co/edit/RQZCJhQDaD0ZPURTS0Lp?p=preview

Angular UI Bootstrap Datepicker文本字段

1 个答案: