Add class to an element inside a directive with angular and without jquery

Question

I have a simple directive and I'd like to access one of its inner DOM element to add a class to it.

div(my-directive)
  div
    // some html
    span.myDiv
       | some text

My HTML has much more elements than this so accessing .myDiv via the .childen() method is quite tedious.

I've tried the following which doesn't work:

.directive('myDiv', ['$compile', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      var el = element[0].getElementsByClassName('myDiv')

      angular.element(el).addClass('myAwesomeClass')
      $compile(el)(scope)

    }
  }
}])

How can I do this?

Many thanks

ok, why would you need to do that? but if you do need to do some complex css selector operation i would advice to use something like sizzle. how ever 90% of the manipulation you would need to do to the DOMcan be done via data binding and templating — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Jan 30, 2015 at 14:26

Alborz · Accepted Answer · 2015-01-30 15:04:43Z

2

You can use document.querySelector to find the target element to add the class. $compile(el)(scope) is not required here when you add a class using angular.

JSBin Preview

JsBin Edit

edited Jan 30, 2015 at 15:04

answered Jan 30, 2015 at 14:52

Alborz

6,9333 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

micha Over a year ago

you can use element[0].querySelector than you only search in the subtree under the directive

Collectives™ on Stack Overflow

Add class to an element inside a directive with angular and without jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related