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" />

因为在控制台中我看到：＆＃34; 100px＆＃34;打印出来

但是这个html：

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

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

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

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

Answer 1

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

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

targetElement[0].clientHeight

或者使用jQuery：

targetElement.height()

在此处查看更好一点的解释：https://api.jquery.com/height/

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

1 个答案: