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

右键单击包含您要访问的指令的页面，然后单击“检查元素”，然后输入：

angular.element($0).scope()

在您的开发者控制台中。这使您可以访问角度范围内的所有数据。这将有助于调试角度正在使用的数据。但是，在更直接地回答你的问题时，我做了类似的事情，我在一个指令中设置了css属性。它会把你的代码变成这样的东西：

return {
    restrict: 'EA',
    scope: false,
    replace:true,
    templateUrl: 'submitter/reports/errormsgbox.html',
    link: function(scope,element,attr) {
        element.css({
                    width: '360px',
                    height: '640px',
                    position: 'absolute',
                    top: '0px',
                    left: '0px',
                    background: '#FFF'
                }); 
    }
};

Answer 2

对于E等<my-dir></my-dir>指令，默认display值将设置为inline。您可以在此处执行一些操作，或者使用replace: true块元素，或者只设置样式规则，在此示例中为my-dir { display: block }。您甚至可以在指令elem.css('display', 'block')函数中调用link。

JSFiddle Example - 简化演示

请注意float规则以及inline-block会考虑边距和填充以便审核offsetHeight

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

2 个答案: