How to delay directive compile until after window load event

Question

I want to delay certain directives to only compile after the window load event. They are below the fold and are slowing down the overall Angular bootstrapping process.

So to this end, I want to create an attribute directive that I can add to directives that will delay their compile function - is this possible?

This link might help you http://stackoverflow.com/questions/21715256/angularjs-event-to-call-after-content-is-loaded — Madhav, Oct 04 '16 at 08:39
Did you try wrapping `ng-if` around the directives. Initially, `ng-if` will be `false`. Once you load the document set `ng-if` to `true`. All the directives will start to render. — Ravi Teja, Oct 04 '16 at 08:43

score 1 · Accepted Answer · answered Oct 04 '16 at 08:43

1

Using $timeout you can put delay functionality.

return function(scope, element, attrs) {
    $timeout(function(){

    });        
}

and don't forget to inject $timeout

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

answered Oct 04 '16 at 08:43

Sangram Badi

4,054
9
45
78

score 0 · Answer 2 · answered Oct 04 '16 at 08:37

0

Try to put your logic after onload event. In order to do this, you should use $(window).load() or $(document).ready().

Hope it helps!

answered Oct 04 '16 at 08:37

Artur Joshi

75
7

How to delay directive compile until after window load event

2 Answers2