dom完成渲染后如何运行指令？

Question

我有一个看似简单的问题，没有明显的解决方案 （通过阅读Angular JS文档） 。

我有一个Angular JS指令，该指令根据其他DOM元素的高度进行一些计算，以定义DOM中容器的高度。

指令内部发生了类似的事情：

return function(scope, element, attrs) {
    $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
}

问题是当指令运行时，$('site-header')找不到它，返回一个空数组而不是我需要的jQuery包装的DOM元素。

我是否可以在指令中使用仅在加载DOM之后运行的回调，并且可以通过常规jQuery选择器样式查询访问其他DOM元素？

Answer 1

这取决于$（’site-header’）的构造方式。

您可以尝试使用$ timeout，延迟为0。就像是：

return function(scope, element, attrs) {
    $timeout(function(){
        $('.main').height( $('.site-header').height() -  $('.site-footer').height() );
    });        
}

解释其工作方式：一，二。

不要忘记$timeout在指令中添加：

.directive('sticky', function($timeout)