Angular 指令适用于内联样式，但不适用于类

Question

我有这个指令：

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'));
        }
   }
]);

这个 html 效果很好：

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

因为在控制台中我看到：“100px”打印出来了

但是有了这个 html：

 <style>
      .div-example {
          height: 100px;
      }
 </style>

 <div id="div2" class="div-example">A div</div>
 <example-directive target-selector="#div2" />

基本相同，但没有内联样式，该指令根本不起作用。控制台正在打印：“”（空字符串）。

我该如何解决这个问题？
我试过scope: true，但也没有用。
targetElement.css('height') 是否只适用于内联样式？

Answer 1

当您执行.css('height') 时，jQuery 只能告诉您在元素的style 属性或属性中设置的值。

如果您想知道元素的实际高度，请尝试使用

targetElement[0].clientHeight

或者使用 jQuery：

targetElement.height()

这里的区别解释得更好一点：https://api.jquery.com/height/