1

编辑 1：修复了一个错误，但仍然无法正常工作。

element.val(ngModel.$viewValue || '');

本来应该：

dateInput.val(ngModel.$viewValue || '');

编辑2：问题似乎是由于隔离范围。当作用域是隔离时，注入ngModel的方法不会被调用。$render()如果我将范围设为非隔离并设置ng-model="selectedDate"，$render()则按预期调用。

编辑 3：实际上问题是由于$parent.selectedDate. 如果我将其更改为selectedDate，代码似乎工作正常。但是我想确保它selectedDate没有在指令的范围内定义，而是从其父范围继承。这就是我想使用的原因$parent.，但它没有按预期工作。

我正在编写一个自定义日期选择器，当浏览器支持 HTML5 日期输入时，使用它，否则使用 jQuery UI 的日期选择器。它仍在进行中，现在只有使用本机 HTML 5 日期输入的部分正在实施。

该指令可以这样使用：

<div mil-datepicker ng-model="$parent.selectedDate"></div>

但是，当$scope.selectedDate具有初始值时，指令不会呈现它。指令也没有观察到对 selectedDate` 的外部更改（例如，通过单击按钮）。

任何想法我的代码可能有什么问题？

这是代码的实时版本：milDatePicker。

这是指令的代码：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.selectedDate = '2020-01-01';
  $scope.changeDate = function() {
    $scope.selectedDate = '2030-03-03';
  };
});

app.directive('milDatepicker', function () {
   var template =
      '<div class="mil-datepicker clearfix">' +
         '   <input type="date" class="form-control">' +
         '   <div class="btn-group">' +
         '      <button type="button" class="btn btn-default btn-back">' +
         '         <span class="glyphicon glyphicon-chevron-left"></span>' +
         '      </button>' +
         '      <button type="button" class="btn btn-default btn-reset">Today</button>' +
         '      <button type="button" class="btn btn-default btn-forward">' +
         '         <span class="glyphicon glyphicon-chevron-right"></span>' +
         '      </button>' +
         '   </div>' +
         '</div>';

   return {
      template: template,
      restrict: 'A',
      require: 'ngModel',
      scope: {},
      priority: 0,
      link: function (scope, element, attrs, ngModel) {
         var nativeDatePickerHandlers = {
            back: function () {
               var $input = element.find("input").first();
               if ($input.val() === '' || $input.val() === undefined) {
                  return;
               }

               scope.$apply(function () {
                  var currentDate = moment($input.val(), "YYYY-MM-DD"),
                     yesterday = currentDate.subtract('days', 1).format("YYYY-MM-DD");

                  $input.val(yesterday);
                  ngModel.$setViewValue(yesterday);
               });
            },
            forward: function () {
               var $input = element.find("input").first();
               if ($input.val() === '' || $input.val() === undefined) {
                  return;
               }

               scope.$apply(function () {
                  var currentDate = moment($input.val(), "YYYY-MM-DD"),
                     tomorrow = currentDate.add('days', 1).format("YYYY-MM-DD");

                  $input.val(tomorrow);
                  ngModel.$setViewValue(tomorrow);
               });
            },
            reset: function () {
               var $input = element.find("input").first();

               scope.$apply(function() {
                  var today = moment().format("YYYY-MM-DD");
                  $input.val(today);
                  ngModel.$setViewValue(today);
               });
            },
            change: function () {
               var $this = $(this);

               scope.$apply(function () {
                  ngModel.$setViewValue($this.val());
               });
            }
         };

         function initNativeDatePicker(element) {
            var dateInput = element.find("input").first();

            element.find('.btn-back').first().on("click", nativeDatePickerHandlers.back);
            element.find('.btn-reset').first().on("click", nativeDatePickerHandlers.reset);
            element.find('.btn-forward').first().on("click", nativeDatePickerHandlers.forward);

            dateInput.on("change", nativeDatePickerHandlers.change);

            ngModel.$render = function () {
               dateInput.val(ngModel.$viewValue || '');
            };
         }

         // on browsers that support the HTML 5 date picker just use that
         // and do not use the jQuery UI DatePicker
         if (Modernizr.inputtypes.date) {
            initNativeDatePicker(element);
         } else {

         }
      }
   };
});
4

0 回答 0