Question

我尝试计算DOM元素的高度以定位另一个元素。

以下是代码的不同部分：

HTML

<div class="header">
    <div>
        <span class="line1">{{ getLine1() }}</span>
        <span class="line2">{{ getLine2() }}</span>
    </div>
</div>
<div class="tab_list" ng-style="{ 'top': getHeaderHeight() + 'px' }">   
    content
</div>

的Javascript

$scope.getHeaderHeight = function() {
    var header = document.getElementsByClassName("header");
    if(header[0])
    {
        if(header[0].offsetHeight)
        {
            return header[0].offsetHeight+5;                
        }           
    }
    return 0;
};

每次高度回归为5。但是，如果我做manualy它返回正确的值75。

我认为它返回一个错误值，因为在“getLine1”和“getLine2”之前调用了ng-style。

有没有办法在最后或其他方式触发ng-style来实现这个目标？

Answer 1

第一件事 -

如果您正在进行DOM操作或任何直接影响DOM / HTML的计算，请将其写入Pankaj所说的指令中。

指令及其定义方式始终附加到DOM节点。因此，当您定义指令时，它会“扩展”或替换它所附加的dom节点。

Dom操作不应存在于控制器，服务或其他任何地方，而应存在于指令中。

<强>其次 -

不确定$ timeout，这可能是您加载时间的开销。

一个很好的参考 - Best Practice DOM Manipulation in Angular JS

Angularjs ng-style射击太快了

1 个答案: