检测NG模型变化成指令

我正在做一个自定义的验证（指令）来比较两个日期，显示错误，如果起始日期比END_DATE更大...... 我传递起始日期通过NG-模型检测NG模型变化成指令

ng-model="start_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。

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

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

来源

2013-10-02 Leantraxxx

我相信你应该能够观察ctrl属性或ctrl的子属性中的一个来查找模型。 –

你应该格式化“的功能阵列来执行，作为管道，每当模型值改变”。

所以才这样做：

 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元素改变，而不是直接。

来源

2013-10-02 23:46:43

设置你的链接功能内结合ngModel：

var modelValue = $parse(attr.ngModel); 

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

来源

2013-10-02 23:26:35 thesamet

检测NG模型变化成指令

回答

相关问题