检测 ng-model 更改为指令答案

【问题标题】：Detect ng-model change into directive检测 ng-model 更改为指令
【发布时间】：2013-10-03 07:46:43
【问题描述】：

我正在执行自定义验证（指令）来比较两个日期并在 start_date 大于 end_date 时显示错误... 我通过 ng-model 传递 start_date

ng-model="start_date"

和 end_date 与我的指令：

lower-than-date="{{end_date.toISOString()}}" //ignore the toISOString()

我使用指令的输入...

<input type="text" ng-model="start_date"
datepicker-popup="yyyy-MM-dd" min="today" show-weeks="false"
lower-than-date="{{end_date.toISOString()}}"/>

指令...

.directive("lowerThanDate", ['$parse', function($parse) {
    return {
        require: 'ngModel',

        link: function (scope, element, attrs, ctrl) {

            var lowerThan = null;
            function revalidate(_val) {
                var valid = _val && lowerThan ? _val < lowerThan : true;
                ctrl.$setValidity('lowerThanDate', valid);
            }

            attrs.$observe('lowerThanDate', function(_value) {
                //Here I'm detecting when end_date change
                lowerThan = new Date(_value);
                revalidate(ctrl.$modelValue);
            });

            ctrl.$parsers.unshift(function(_value) {
                revalidate(_value);
                return _value;
            });
        }
    };
}])

此代码运行良好，但只有在我更改 end_date 时才会触发验证。我也想验证何时更改 start_date。

所以，问题是：如何“观察” ng-model 值以在 start_date 更改时触发验证。

注意：这是比较日期的通用指令。请记住这一点。

【问题讨论】：

我相信你应该能够 $observe 的 ctrl 属性或 ctrl 的子属性之一来找到模型。

标签： validation angularjs angularjs-directive

【解决方案1】：

在链接函数中设置到ngModel 的绑定：

var modelValue = $parse(attr.ngModel);

scope.$watch(modelValue, function(value) {
  // validate value against endDate.
});

【讨论】：

【解决方案2】：

你应该有一个格式化程序：“当模型值发生变化时，作为管道执行的函数数组”。

所以只需执行以下操作：

        function revalidate(_val) {
            var valid = _val && lowerThan ? _val < lowerThan : true;
            ctrl.$setValidity('lowerThanDate', valid);
            return _val;
        }
        ....
        ctrl.$formatters.unshift(revalidate);
        ctrl.$parsers.unshift(revalidate);

原因可能是模型从其他地方更改，而不是直接在 DOM 元素中。

【讨论】：