title: Getting CSS from Angular element in custom directive using dynamic class name
body: <p>I have a custom directive that makes use of the background color of the element in the link function:</p>
  
  <pre><code>.directive('ktMouseover', function($log) {
    return {
      restrict: "AC",
      link: function(scope, elm, attrs) {
        if ($(".ie8, .ie7").length === 0) {
          console.log(elm.attr("class"));
          var oldBackgroundColor = elm.css("background-color") || elm.css("background")
            , colors = attrs["ktMouseover"].split("|")[0] || "#fec|#f55"
            , timings = attrs["ktMouseover"].split("|")[1] || "75|150"
            , newBackgroundColor = colors.split(":")[0] || "#fec"
            , newDangerColor = colors.split(":")[1] || "#f55"
            , fadeInTime = parseInt(timings.split(":")[0]) || 75
            , fadeOutTime = parseInt(timings.split(":")[1]) || 150;
  
          elm.mouseenter(function() {
            if (elm.hasClass("inactive")) return;
            $(this).animate({
              "backgroundColor":($(this).hasClass("danger") ? newDangerColor : newBackgroundColor)
            }, fadeInTime);
          }).mouseleave(function() {
            $(this).animate({
              "backgroundColor": (oldBackgroundColor ? oldBackgroundColor : "transparent")
            }, fadeOutTime);
          });
        }
      }
    };
  })
  </code></pre>
  
  <p>HTML snippet:</p>
  
  <pre><code>        &lt;li class="{{child.type()}}"
              ng-include="'/partials/tree.html'"
              id="container_{{child.id()}}" 
              kt-mouseover=":#f55|75:150" 
              ng-click="getChildren(child)" 
              ng-repeat="child in vault.children()"&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>When I initially coded this, I was using a static class name for the tag (and that's how the background-color is set in my css). Now I have a need for these directives to have a dynamic class name, which suddenly makes it impossible to grab the background-color from the element, as the class name hasn't been applied to it yet. </p>
  
  <p>How do I accomplish this idiomatically in AngularJS?</p>