Prevent directive compiling angular

Question

Im currently working on a Validation directive. Everything works fine but the link function gets called even when the input element is inside a element which will be hidden via "ng-if".

Is there a way to check if the element is inside a hidden ng-if element?

My Directive:

validationModule.directive("validateText", ['ValidationService', '$filter', function (ValidationService, $filter) {
    return {
        link: function (scope, element, attrs) {
           //validation magic
        }
    };
}]);

Markup

 <div class="col-sm-7" ng-if="!initDataSource.IsReadOnly">
                            <input type="text" class="form-control" ng-model="Bestellung.BestellungKopfdaten.StartZeitDate"  validate-text validationgroup="Bestellung">
                            <p class="help-block">Error Message</p>
                        </div>

Answer 1

try this:

    element.offsetParent === null

Where element is the DOM element you'd like to test for visibility

Answer 2

You can try using this -

    validationModule.directive("validateText", ['ValidationService', '$filter', function (ValidationService, $filter) {
        return {
            link: function (scope, element, attrs) {
               //validation magic
               if(scope.initDataSource.IsReadOnly)
               {
               }
        }
    };
}]);

Answer 3

I found a solution for my needs. I'm listening to the $destroy event and undo my validation if it occurs

scope.$on("$destroy", function () {
            ValidationService.Unvalidate(element, attrs.ngModel);
  });