blocks|key|1930826|text|这取决于你的$('site-header')是如何构造的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1930827|您可以尝试使用延迟为0的$timeout。类似于：|offset|length|1930828|return+function(scope,+element,+attrs)+{
++++$timeout(function(){
++++++++$('.main').height(+$('.site-header').height()+-++$('.site-footer').height()+);
++++});++++++++
}|code-block|syntax|javascript|1930829|解释它的工作原理：one，two。|1930830|不要忘记在您的指令中注入$timeout：|style|CODE|1930831|.directive('sticky',+function($timeout)|1930832|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng.$timeout|1|http://ejohn.org/blog/how-javascript-timers-work/|2|https://stackoverflow.com/questions/779379/why-does-settimeoutfn-0-sometimes-help#comment14183689_779785^0|0|C|8|0|0|0|9|3|1|D|3|2|0|C|8|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|9|@$D|1B|E|1C|1|1D]|$D|1E|E|1F|1|1G]]|A|$]]|$1|M|3|N|5|6|7|1H|8|@$D|1I|E|1J|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|H|7|1K|8|@]|9|@]|A|$I|J]]|$1|S|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]|12|$5|V|W|X|A|$Y|13]]]]

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

You can try to use <a href="http://docs.angularjs.org/api/ng.$timeout" rel="noreferrer">$timeout</a> with 0 delay. Something like:

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

Explanations how it works: <a href="http://ejohn.org/blog/how-javascript-timers-work/" rel="noreferrer">one</a>, <a href="https://stackoverflow.com/questions/779379/why-does-settimeoutfn-0-sometimes-help#comment14183689_779785">two</a>.

Don't forget to inject <code>$timeout</code> in your directive: 

<pre><code>.directive('sticky', function($timeout)
</code></pre>

blocks|key|1717392|text|也许作者不再需要我的答案了。尽管如此，为了完整起见，我觉得其他用户可能会发现它很有用。最好也是最简单的解决方案是在返回的函数体中使用$(window).load()。(或者，您可以使用document.ready。这真的取决于你是否需要所有的图像)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1717393|在我看来，使用$timeout是一个非常弱的选择，在某些情况下可能会失败。|1717394|下面是我使用的完整代码：|1717395|.directive('directiveExample',+function(){
+++return+{
+++++++restrict:+'A',
+++++++link:+function($scope,+$elem,+attrs){

+++++++++++$(window).load(function()+{
+++++++++++++++//...JS+here...
+++++++++++});
+++++++}
+++}
});|code-block|syntax|javascript|1717396|entityMap^0|1U|G|2K|E|0|7|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

Probably the author won't need my answer anymore. Still, for sake of completeness i feel other users might find it useful. The best and most simple solution is to use <code>$(window).load()</code> inside the body of the returned function. (alternatively you can use <code>document.ready</code>. It really depends if you need all the images or not).

Using <code>$timeout</code> in my humble opinion is a very weak option and may fail in some cases.

Here is the complete code i'd use:

<pre><code>.directive('directiveExample', function(){
 return {
 restrict: 'A',
 link: function($scope, $elem, attrs){

 $(window).load(function() {
 //...JS here...
 });
 }
 }
});
</code></pre>

blocks|key|1930957|text|有一个ngcontentloaded事件，我想你可以用它|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1930958|.directive('directiveExample',+function(){
+++return+{
+++++++restrict:+'A',
+++++++link:+function(scope,+elem,+attrs){

++++++++++++++++$$window+=+$+$window


++++++++++++++++init+=+function(){
++++++++++++++++++++contentHeight+=+elem.outerHeight()
++++++++++++++++++++//do+the+things
++++++++++++++++}

++++++++++++++++$$window.on('ngcontentloaded',init)

+++++++}
+++}
});|code-block|syntax|javascript|1930959|entityMap^0|3|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

there is a <code>ngcontentloaded</code> event, I think you can use it

<pre><code>.directive('directiveExample', function(){
 return {
 restrict: 'A',
 link: function(scope, elem, attrs){

 $$window = $ $window


 init = function(){
 contentHeight = elem.outerHeight()
 //do the things
 }

 $$window.on('ngcontentloaded',init)

 }
 }
});
</code></pre>

blocks|key|1931052|text|我是这样做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1931053|app.directive('example',+function()+{

++++return+function(scope,+element,+attrs)+{
++++++++angular.element(document).ready(function()+{
++++++++++++++++//MANIPULATE+THE+DOM
++++++++});
++++};

});|code-block|syntax|javascript|1931054|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is how I do it:

<pre><code>app.directive('example', function() {

 return function(scope, element, attrs) {
 angular.element(document).ready(function() {
 //MANIPULATE THE DOM
 });
 };

});
</code></pre>

blocks|key|1717760|text|如果由于外部资源的原因而不能使用$timeout，并且由于计时的特定问题而不能使用指令，那么可以使用广播。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1717761|在所需的外部资源或长时间运行的控制器/指令完成后添加$scope.$broadcast("variable_name_here");。|offset|length|style|CODE|1717762|然后在加载外部资源后添加以下内容。|1717763|$scope.$on("variable_name_here",+function(){+
+++//+DOM+manipulation+here
+++jQuery('selector').height();+
}|code-block|syntax|javascript|1717764|例如，在延迟HTTP请求的承诺中。|1717765|MyHttpService.then(function(data){
+++$scope.MyHttpReturnedImage+=+data.image;
+++$scope.$broadcast("imageLoaded");
});

$scope.$on("imageLoaded",+function(){+
+++jQuery('img').height(80).width(80);+
}|1717766|entityMap^0|0|Q|14|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

If you can't use $timeout due to external resources and cant use a directive due to a specific issue with timing, use broadcast. 

Add <code>$scope.$broadcast("variable_name_here");</code> after the desired external resource or long running controller/directive has completed. 

Then add the below after your external resource has loaded. 

<pre><code>$scope.$on("variable_name_here", function(){ 
 // DOM manipulation here
 jQuery('selector').height(); 
}
</code></pre>

For example in the promise of a deferred HTTP request. 

<pre><code>MyHttpService.then(function(data){
 $scope.MyHttpReturnedImage = data.image;
 $scope.$broadcast("imageLoaded");
});

$scope.$on("imageLoaded", function(){ 
 jQuery('img').height(80).width(80); 
}
</code></pre>

blocks|key|1931424|text|我遇到了类似的问题，想在这里分享我的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1931425|我有以下HTML：|1931426|<div+data-my-directive>
++<div+id='sub'+ng-include='includedFile.htm'></div>
</div>|code-block|syntax|javascript|1931427|问题:在父div的指令的链接函数中，我想jquery子div#sub。但它只是给了我一个空对象，因为当指令的link函数运行时，ng-include还没有完成。因此，首先我用$timeout做了一个糟糕的变通方法，它是有效的，但是延迟参数依赖于客户端的速度(没有人喜欢这样)。|1931428|工作但很脏：|1931429|app.directive('myDirective',+[function+()+{
++++var+directive+=+{};
++++directive.link+=+function+(scope,+element,+attrs)+{
++++++++$timeout(function()+{
++++++++++++//very+dirty+cause+of+client-depending+varying+delay+time+
++++++++++++$('#sub').css(/*whatever*/);
++++++++},+350);
++++};
++++return+directive;
}]);|1931430|这是一个干净的解决方案：|1931431|app.directive('myDirective',+[function+()+{
++++var+directive+=+{};
++++directive.link+=+function+(scope,+element,+attrs)+{
++++++++scope.$on('$includeContentLoaded',+function()+{
++++++++++++//just+happens+in+the+moment+when+ng-included+finished
++++++++++++$('#sub').css(/*whatever*/);
++++++++};
++++};
++++return+directive;
}]);|1931432|也许这对某人有帮助。|1931433|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

I had the a similar problem and want to share my solution here.

I have the following HTML:

<pre><code>&lt;div data-my-directive&gt;
 &lt;div id='sub' ng-include='includedFile.htm'&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

Problem: In the link-function of directive of the parent div I wanted to jquery'ing the child div#sub. But it just gave me an empty object because ng-include hadn't finished when link function of directive ran. So first I made a dirty workaround with $timeout, which worked but the delay-parameter depended on client speed (nobody likes that).

Works but dirty:

<pre><code>app.directive('myDirective', [function () {
 var directive = {};
 directive.link = function (scope, element, attrs) {
 $timeout(function() {
 //very dirty cause of client-depending varying delay time 
 $('#sub').css(/*whatever*/);
 }, 350);
 };
 return directive;
}]);
</code></pre>

Here's the clean solution:

<pre><code>app.directive('myDirective', [function () {
 var directive = {};
 directive.link = function (scope, element, attrs) {
 scope.$on('$includeContentLoaded', function() {
 //just happens in the moment when ng-included finished
 $('#sub').css(/*whatever*/);
 };
 };
 return directive;
}]);
</code></pre>

Maybe it helps somebody.

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

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:

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

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

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?

How can I run a directive after the dom has finished rendering?

容器

jQuery

我有一个看似简单的问题，但没有明显的解决方案(通过阅读Angular JS文档)。我得到了一个Angular JS指令，它根据其他DOM元素的高度进行一些计算，以定义DOM中容器的高度。与此类似的事情正在指令中发生：return function(scope, element, attrs) {    $('.main...

问在dom完成渲染后，我如何运行指令呢？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在dom完成渲染后，我如何运行指令呢？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在dom完成渲染后，我如何运行指令呢？
EN