title: Accessing child's '$invalid' validation prop within a directive
body: <p>I am trying to create a reusable directive that will simply add a class to an element based on the <code>$invalid</code> property of one of its children.</p>
  
  <p>I started creating the directive, but am unsure of how to go about accessing the <code>$invalid</code> prop:</p>
  
  <p><br>
  Simplified Markup:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;form&gt;
      &lt;div class="group" ng-validate="emailAddress"&gt;
          &lt;div class="wrapper"&gt;
              &lt;input type="email" name="emailAddress" ng-model="emailAddress" required/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><br></p>
  
  <p>And the directive:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>function ngValidate ()
  {
      function linkFunction (scope, element, attributes, controller)
      {
          var el = element[0];
          var targetElName = attributes.ngValidate;
          var $targetEl = angular.element(el.querySelector("[name='" + targetElName + "']"));
  
          $targetEl.on("blur", blurHandler);
  
          function blurHandler (event)
          {
              console.log($targetEl.$invalid); // always undefined??
  
              // what I want to happen (sudo code):
  
              // if $targetEl is $invalid then add class 'error' to element.
              // if $targetEl is $valid then add class 'success' to element.
          }
      }
  
      return {
          restrict: "A",
          link: linkFunction
      };
  }
  </code></pre>
  
  <p><br>
  I'm a little stuck with this, so any help would be appreciated.</p>