Angular directive works with inline style but not with class

Question

I have this directive:

angular.module('exampleApp').directive('exampleDirective', ['$document', '$window', function($document, $window) { return { restrict: 'E', scope: false, template: '<div class="foo"></div>', link: function($scope, $element, $attrs) { var targetElement = angular.element(document.querySelector($attrs['targetSelector'])); console.log(targetElement.css('height')); } } ]);

Which works fine with this html:

 <div id="div1" style="height: 100px">A div</div> <example-directive target-selector="#div1" />

Because in the console I see: "100px" printed out

But with this html:

 <style> .div-example { height: 100px; } </style> <div id="div2" class="div-example">A div</div> <example-directive target-selector="#div2" />

Which is basically the same but without inline-style, the directive is simply not working. The console is printing: "" (empty string).

How do I solve this?
I tried scope: true but it didn't work either.
Is targetElement.css('height') only good for inline style?

yeah that was a typo when writing the question, sorry... the real code doesn't have that typo. I've fixed the code in the question. — sports
– sports, Commented Apr 14, 2015 at 15:40
jqlite - css - Only retrieves inline-styles, does not call getComputedStyle() - docs.angularjs.org/api/ng/function/angular.element#css() — YOU
– YOU, Commented Apr 14, 2015 at 15:55
fyi - clientHeight or offsetHeight is way to go - plnkr.co/edit/HU2l3gkMeotndxVCEHON?p=preview — YOU
– YOU, Commented Apr 14, 2015 at 16:00

Victor · Accepted Answer · 2015-04-14 15:46:53Z

1

When you do .css('height'), jQuery can tell you only the values set in the element's style property or attribute.

If you want to know the actual height of an element, try with

targetElement[0].clientHeight

Or with jQuery:

targetElement.height()

See the difference explained a bit better here: https://api.jquery.com/height/

edited Apr 14, 2015 at 15:46

answered Apr 14, 2015 at 15:39

Victor

9,2793 gold badges29 silver badges40 bronze badges

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

4 Comments

sports Over a year ago

but i'm not even using jquery... this is the angular's own jqLite (i think that is how its called)

sports Over a year ago

also targetElement.clientHeight is giving me undefined

Victor Over a year ago

Sorry, should have specified it better. your targetElement is a jqlite object and clientHeight is a property of the actual DOM element. use .height() or do .get(0).clientHeight

sports Over a year ago

Marked as accepted although I ended up using this: window.getComputedStyle(targetElement[0], null).getPropertyValue("height"), because I needed the computed height, not the clientHeight nor the offsetHeight

Collectives™ on Stack Overflow

Angular directive works with inline style but not with class

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related