AngularJs проверка директива не обновляет моделирует

Question

Я сделал эту директиву, чтобы проверить номер, если он находится в диапазоне:

app.directive('nkNumber', function(){ 
    return { 
    scope: { 
     max: '=nkMax', 
     min: '=nkMin' 
    }, 
    require: 'ngModel', 
    restrict: 'A', 
    link: function($scope, iElm, iAttrs, controller) { 
     function validate(value){ 
     if (angular.isDefined(value)){ 
      value = parseInt(value); 
      if ($scope.max){ 
      var max = parseInt($scope.max); 
      controller.$setValidity('nkMax', value < max) 
      } 
      if ($scope.min){ 
      var min = parseInt($scope.min); 
      controller.$setValidity('nkMin', value > min) 
      } 
     } 
     return value; 
     } 
     controller.$parsers.push(validate); 
     controller.$formatters.push(validate); 
    } 
    }; 
}); 

Проверка отлично работает, но моя модель не обновляются при изменении значения на входе.

Почему это происходит? Как я могу это решить?

Answer 1

Возможно, вы используете версию углов до 1.2.x. Старые версии углового обработанного изоляционного пространства непоследовательно, часто проглатывая другие директивы в области изоляции. Это то, что происходит в вашем случае.

Модель ng действует в области изоляции вашей директивы nk-number, поэтому она записывает ее значение в эту частную область, а не внешнюю область.

Если вы используете угловую версию 1.2.x, то изоляционная область не смешивается, так что все должно работать должным образом.

Исправление, если вы хотите остаться в более ранней версии углового, не должно полностью использовать область изоляции для этой конкретной директивы.

В общем, почти всегда плохая идея использовать область изоляции, если у вашей директивы нет шаблона. Если ваша директива не имеет собственного шаблона, использование области изоляции вряд ли оправдано и может вызвать проблемы, которые вы видите.

Вот пример вашей директивы написаны без изолята сферы:

app.directive('nkNumber', function($parse){ 
    return { 
    require: 'ngModel', 
    restrict: 'A', 
    link: function($scope, iElm, iAttrs, controller) { 

     function validate(value){ 
     var max = $scope.$eval(iAttrs.nkMax); 
     var min = $scope.$eval(iAttrs.nkMin); 

     if (angular.isDefined(value)){ 
      value = parseInt(value); 
      if (max){ 
      max = parseInt(max); 
      controller.$setValidity('nkMax', value < max) 
      } 
      if ($scope.min){ 
      min = parseInt(min); 
      controller.$setValidity('nkMin', value > min) 
      } 
     } 
     return value; 
     } 
     controller.$parsers.push(validate); 
     controller.$formatters.push(validate); 
    } 
    }; 
}); 

обратите внимание, что без изолята области, которую нужно использовать $scope.$eval() на атрибутах nkMax и nkMin.

Это на самом деле лучший способ написать эту директиву и будет работать во всех версиях угловых.