从AngularJS版本1.0.8转换为1.4.2的问题

Question

I have a lovely date dropdown that works in AngularJS V1.0.8 and I am trying to run it using V1.4.2 but it doesn't seem to want to play ball.

What seems to be the issue? As I have researched changes in the versions but can't see the problem.

I have got a plunker where you can see it working using 1.0.8 and then when you change the version on lines 5 and 8 to 1.4.2 it doesn't work.

The fields should become invalid for dates like 31/02/2000 etc which is fine but not in 1.4.2

What can the matter be?

https://plnkr.co/edit/5ckBkzN6xYEvJvyoO0Ax?p=preview

angular.module('dateApp', []);
angular.module('dateApp'). 
 directive('dateTypeMulti', function () {
return {
  require: 'ngModel',
  link: function (scope, element, attrs, ngModel) {
    ngModel.$render = function () {
      angular.extend(scope.$eval(attrs.dateTypeMulti), ngModel.$viewValue);
    };

    scope.$watch(attrs.dateTypeMulti, function (viewValue) {
      ngModel.$setViewValue(viewValue); 
    }, true);

    ngModel.$formatters.push(function (modelValue) {
      if (!modelValue) return;

     var parts = String(modelValue).split('/');

      return {
        year: parts[0],
        month: parts[1],
        day: parts[2]
      };
    });

    ngModel.$parsers.unshift(function (viewValue) {
      var isValid = true,
          modelValue = '',
          date;

      if (viewValue) {
        date = new Date(viewValue.year, viewValue.month - 1, viewValue.day);
        modelValue = [viewValue.year, viewValue.month, viewValue.day].join('/');

        if ('//' === modelValue) {
          modelValue = '';
        } else if (
            date.getFullYear() != viewValue.year ||
            date.getMonth() != viewValue.month - 1 ||
            date.getDate() != viewValue.day) {
          isValid = false;
        }
      }

      ngModel.$setValidity('dateTypeMulti', isValid);

      return isValid ? modelValue : undefined;
    });
  }
};
})

Thanks

Answer 1

Your directive stops working in 1.3.0-beta.10 , probably because of the following change:

ngModel: do not dirty the input on $commitViewValue if nothing was changed

Since you are using an object as the view value:

scope.$watch(attrs.dateTypeMulti, function (viewValue) {
  ngModel.$setViewValue(viewValue); 
}, true);

The same object reference will be used, $commitViewValue will deem nothing to have changed and abort before the parse and validate pipeline gets started.

The documentation for $setViewValue states:

When used with standard inputs, the view value will always be a string (which is in some cases parsed into another type, such as a Date object for input[date].) However, custom controls might also pass objects to this method. In this case, we should make a copy of the object before passing it to $setViewValue. This is because ngModel does not perform a deep watch of objects, it only looks for a change of identity. If you only change the property of the object then ngModel will not realize that the object has changed and will not invoke the $parsers and $validators pipelines. For this reason, you should not change properties of the copy once it has been passed to $setViewValue. Otherwise you may cause the model value on the scope to change incorrectly.

Change to use angular.copy and it should work:

ngModel.$setViewValue(angular.copy(viewValue))

Demo: https://plnkr.co/edit/kSS56n6LlHej25vcjfQq?p=preview