AngularJs validating directive doesn't update model

Question

I did this directive to validate a number if it is in a range:

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);
    }
  };
});

The validation works fine, but my model isn't updated when I change the value on the input.

Why is this happening? How can I solve it?

Where/why/how should the model be updated? The validation indeed works: plnkr.co/edit/PWOL8zyFDnpiLDuFnjrn?p=preview but could you please explain what the expected behavior is? — musically_ut
– musically_ut, Commented Dec 10, 2013 at 9:01
mmm it works...It's the Angular version changing it to the 1.0.3 it stop to work...I'm using the 1.0.5... plnkr.co/edit/qRc8JClqCc5DFTjigrxL?p=preview — rascio
– rascio, Commented Dec 10, 2013 at 9:06

Daniel Tabuenca · Accepted Answer · 2013-12-10 09:23:58Z

You are probably using a version of angular prior to 1.2.x. Older versions of angular handled isolate scope inconsistently, often swallowing other directives into the isolate scope. This is what is happening in your case.

The ng-model is acting on the isolate scope of your nk-number directive, so it is writing it's value into this private scope rather than the outer scope.

If you are using 1.2.x version of angular, the isolate scope does not mix like this, so things should work as expected.

The fix if you want to remain in an older version of angular is to not use isolate scope at all for this particular directive.

In general, it is almost always a bad idea to use isolate scope unless your directive has a template. If your directive does not have its own template, the use of isolate scope is hardly ever justified and can cause the sort of problems that you are seeing.

Here is an example of your directive written without isolate scope:

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);
    }
  };
});

notice that without isolate scope you need to use $scope.$eval() on the nkMax and nkMin attributes.

This actually the better way to write this directive, and will work in all versions of angular.

Collectives™ on Stack Overflow

AngularJs validating directive doesn't update model

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related