0

I'm trying to write a directive that will validate whether the value one input is not greater than the value of another. It partly works, meaning that the directive can detect the lower & higher attributes, but how do I set up the directive to correctly parse interpolated values?

The catch is that the element has another directive using isolated scope. The other directive needs isolated scope, so I get the error listed below. What are my options?

ERROR: Multiple directives [fcsaNumber, isnotgreater (module: mdp)] asking for new/isolated scope on:

HTML

<input name="participants" type="text" class="form-control" ng-model="CaseInput.participants"  onkeypress='return event.charCode >= 48 && event.charCode <= 57' fcsa-number={{getValue(parts)}} required isnotgreater
    lower="{{participants}}" higher="{{Employees}}"/>

directive

var isnotgreaterModule =angular.module('aaa.directives');

  isnotgreaterModule.directive('isnotgreater', function() {

    return {
      restrict: 'A',
      require: 'ngModel',
         scope:{
           lower: '&lower'
         },
      link: function ($scope, elem, attr, ngModelCtrl) {


        //console.log("nodup link " + attr.noduplicate );

        var lower = attr.lower;
        var higher = attr.higher;
        ngModelCtrl.$validators.isnotgreater = function(){
          //return !scope.$parent.$parent[scope.noduplicate]();

            var t=$scope.higher;
            if (!$.isNumeric(lower) || !$.isNumeric(higher) ){
               //not #'s, can't compare
               ngModelCtrl.$setValidity('isnotgreater', true);
               return true;
            }

            if (Number(lower) <= Number(higher)){
                //lower so this is ok  
                ngModelCtrl.$setValidity('isnotgreater', true);
                return true;
            }else{
                //not lower, this is invalid
                //$scope.caseForm.$invalid = true;
                ngModelCtrl.$setValidity('isnotgreater', false);
                return false;
            }

        };

      }
    };
  });
Mr Smith
  • 3,318
  • 9
  • 47
  • 85
  • Are you even using `scope.lower` from your isolated scope? Doesn't look like it, in which case you can just remove the isolated scope. – Heretic Monkey Apr 29 '16 at 18:33
  • This - " var lower = attr.lower;" does not pass thru the interpolated value – Mr Smith Apr 29 '16 at 18:36
  • 1
    Might want to look at http://stackoverflow.com/questions/11913841/accessing-attributes-from-an-angularjs-directive?rq=1 looks like you need to `$observe` the attribute in order to know when it's been interpolated. – Heretic Monkey Apr 29 '16 at 18:45
  • Thanks, I did end up using $observe. That worked. – Mr Smith Apr 29 '16 at 18:54
  • Since this looks like a duplicate of that one I linked to, you can either delete this question, or I can mark it as a duplicate and you can agree with the duplication. I'll leave it up to you. – Heretic Monkey Apr 29 '16 at 19:02

0 Answers0