我如何运行指令的DOM呈现完毕后？ [英] How can I run a directive after the dom has finished rendering?

问题描述

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

I've got a seemingly simple problem with no apparent (by reading the Angular JS docs) solution.

我有一个角JS指令，做基于其他DOM元素的高度一些计算定义DOM中的容器的高度。

I have got an Angular JS directive that does some calculations based on other DOM elements' height to define the height of a container in the DOM.

东西类似于这样的指令里想的是：

Something similar to this is going on inside the directive:

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

问题是，该指令运行时， $（'网站的头'）无法找到，返回一个空数组，而不是jQuery的包裹DOM元素我需要

The issue is that when the directive runs, $('site-header') cannot be found, returning an empty array instead of the jQuery wrapped DOM element I need.

有没有办法，我可以我的指令，只有DOM已经加载，我可以通过正常的jQuery选择样式的查询访问​​其他的DOM元素后运行中使用的回调？

Is there a callback that I can use within my directive that only runs after the DOM has been loaded and I can access other DOM elements via the normal jQuery selector style queries?

任何帮助将是非常美联社preciated。

Any help would be much appreciated.

推荐答案

这要看你的$（'网站的头'）构造。

It depends on how your $('site-header') is constructed.

您可以尝试使用 $超时 0延迟。是这样的：

You can try to use $timeout with 0 delay. Something like:

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

解释它是如何工作： 之一，<一个href=\"http://stackoverflow.com/questions/779379/why-does-settimeoutfn-0-sometimes-help#comment14183689_779785\">two.

不要忘注入 $超时在你的指令：

Don't forget to inject $timeout in your directive:

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

这篇关于我如何运行指令的DOM呈现完毕后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！