Question

在我目前正在从事的项目中，我使用了restrict: 'E'的指令。

在我的应用程序中的某个时刻，我需要了解这些指令之一的高度，但是无论我如何尝试确定指令的宽度和高度，我总是得到0。

我找到了一些类似的问题，但是解决方案没有帮助，因为这些问题主要是关于在指令控制器/链接器中查找$element的高度/高度。就我而言试图找出尺寸的代码在指令链接器之外。实际上，指令已经在DOM中插入了一段时间。

代码如下：

// the directive
app.directive("widget", function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            config: "="
        },
        ....
    };
});

<!-- the view -->
<widget config="config" ng-attr-id="{{ config.id }}"></widget>

这是试图获取该widget指令尺寸的函数

function widget_dimensions(id)
{
    var $w = $('#' + id);

    if($w.length != 1)
        return;

    return {
        width: $w.width(),
        height: $w.height(),
    };
}

当我传递真实的{ width: 0, height: 0} ID时，此函数始终返回widget。

我准备了一个jsfiddle example来证明这一点。指令已经在DOM中。在element指令上返回非0的唯一函数是getBoundingClientRect()，但是这里的高度是68.9px，应该是50px。

为什么会这样？我已经阅读了$compile文档，希望能找到我以前想念的东西。

我为Linux使用google-chrome版本67.0.3396.87。我测试了 jsfiddle example在Chromium 57.0.2987.98和Vivaldi 1.15.1147.47上，我得到了相同的结果结果。但是，在Firefox 60.0.2上进行的相同测试会产生正确的结果。这是一个错误吗 chrome系列浏览器？还是Webkit /眨眼问题？

编辑

正如Lex在评论中指出的那样，这可能与角度完全无关。我有updated my jsfiddle example，它现在显示display属性。

现在chrome 和 Firefox说

$d1.css("display"): block
$d2.css("display"): inline

有趣的是，<dtest2></dtest2>是内联元素，即使其行为类似于块元件。不过，在计算尺寸时，chrome和Firefox的行为有所不同。哪个是正确的？

Answer 1

正如所说的，添加“ display：block”解决了所有问题，在Firefox和chrome中，您都得到了52px（也计算了边框）。

没有'display：block'的问题与您不应该将block（即div）放在行内（即span）内有关。

P.S。您可以使用clientWidth，clientHeight代替漂亮的getBoundingClientRect。您可以在开发人员控制台中看到相同的高度和宽度。您不应该在角度应用中使用jquery和诸如function（id）之类的方法

为什么将元素指令的宽度和高度计算为0？

1 个答案: