javascript - 如何访问 Angular 指令中的元素？

Question

我正在尝试根据元素的高度设置元素的 css 属性顶部。为此，我创建了一个这样的指令:

directive('errormsgbox', function($timeout) {
    return {
        restrict: 'EA',
        scope: false,
        replace:true,
        templateUrl: 'submitter/reports/errormsgbox.html',
        link: function(scope,element) {
            $timeout(function(){
                    $timeout(function(){
                        console.log(element[0].offsetHeight);   

                },2000);
            },2000)    
        }
    };
})

指令 HTML:

<span ng-if='expenses.hasBlockers || expenses.hasWarnigs' style='border:1px solid gray' ng-show='policyViolation && showpencil' class='msgbox'>
    <ul>
        <li ng-repeat='policymsg in expenses.policyMsg'>
            <span class='floatleft' ng-class="showPolicyClass(policymsg.type)">{{policymsg.type}} - </span><span style='width:285px;' class='floatleft'>{{policymsg.message}}</span>
            <div class='clear'></div>
        </li>
    </ul>
</span> 

主 HTML:

<td class="text-center" style='position:relative'>
    <errormsgbox></errormsgbox>
</td>// it is in a table cell, the content of directive is from ng-repeat in this table

我需要访问 <span> .但如您所见，指令工作正常，它会显示正确的信息，但每次都会记录 undefined对于元素高度。知道如何访问它吗？

Answer 1

对于 E指令，例如 <my-dir></my-dir>默认 display值将设置为 inline .你可以在这里做一些事情，或者利用 replace: true 的 block 元素。或者简单地设置一个样式规则，在这个例子中，my-dir { display: block } .你甚至可以调用 elem.css('display', 'block')在你的指令中 link功能。

JSFiddle Example - 简化演示

---

牢记float规则连同 inline-block将考虑边距和填充以检查 offsetHeight