jquery - 如何在 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() );
    });        
}

解释它是如何工作的:one , two .

不要忘记在指令中注入(inject) $timeout:

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