Javascript 为什么没有调用ngModel.$render？

编辑1:修复了一个错误，但仍然无法工作

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

应该是：

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

编辑2：问题似乎是由于隔离范围造成的。当作用域为隔离时，不会调用注入的

ngModel

的

$render（）

方法。如果我将作用域设置为非隔离并设置

ng model=“selectedDate”

，则会按预期调用

$render（）

编辑3：实际上问题是由于

$parent.selectedDate

。如果我将其更改为

selectedDate

，代码似乎工作正常。但是，我想确保

selectedDate

没有在指令的作用域上定义，而是从其父作用域继承。这就是为什么我想使用

$parent.

，但它没有按预期工作

---

我正在编写一个自定义日期选择器，当浏览器支持HTML5日期输入时，使用它，或者使用jQueryUI的日期选择器。它仍在进行中，目前只实现了使用原生HTML5日期输入的部分

该指令可以这样使用：

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

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 {

         }
      }
   };
});