1

I have a few directives that are children of each other. They can go pretty deep. I'd like to have a border when I hover over one of the directives.

Using :hover {} makes the child have the border but it also makes the parent have the border.

Is there a proper/better way to handle something like this in angular?

Thanks!

americanslon
  • 4,048
  • 4
  • 32
  • 57

1 Answers1

0

To be able to select & style a particular element of a nested directive you'll need to have a mean to isolate that element. Also, only the :hover pseudo-class won't be enough, so binding some events can solve the problem. Below is a sample directive which works this way:

app.directive('directiveSample', function () {
    return {
        restrict: 'E',
        transclude: true,
        // Wrap content
        template: '<div class="container-directive" ng-transclude></div>',
        link: function (scope, element, attr) {

          element.bind('mouseover', function(ev) {

            ev.stopPropagation();

            var wrappers = angular.element(document.getElementsByClassName('container-directive'));
            angular.forEach(wrappers, function(value, key) {
              angular.element(value).children('span').removeClass('active-element'); 
            });

            element.children('.container-directive').children('span').addClass('active-element');

          });

        }
    }
});

The full plunker is HERE.

Gabriel
  • 407
  • 4
  • 4
  • This looks like the answer. However I am having an issue of the link function not being called. Here is the Stack link to the question http://stackoverflow.com/questions/23160356/link-function-not-called – americanslon Apr 18 '14 at 18:53