Directive loading ng-transclude content before directive template loaded

Question

I'm making a directive that has a template that loads in, with some transcluded content that gets passed in. So essentially my html is

<my-directive>
    <div>Some transcluded content</div>
</my-directive>

However, when my page loads, for a split second I see just the transcluded content on the page. I'm guessing there's a delay between when the page initially loads and when the directive template loads. Is there a way to hide the transcluded content until the directive template has loaded?

Thank you so much, it's really a jarring experience having that load first quickly. Does anyone know a way how to fix this?

Answer 1

Add the class ng-hide to your directive temporary and it will be removed automatically as soon as angular comes in action.

<my-directive ng-show="true" class="ng-hide">
    <div>Some transcluded content</div>
</my-directive>

And define .ng-hide { display: none } to your CSS file or else you can write something like this:

<my-directive>
    <div ng-bind="Some transcluded content"></div>
</my-directive>

Hope This helps!

Thanks,
SA

Answer 2

Well, ok so I've found a solution that works using ngCloak . I followed the instructions here , adding this css

[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

and the ng-cloak directive to my directive

<my-directive id="..." class="..." ng-cloak>
    <div>Transcluded content</div>
</my-directive>

This prevents the div from displaying until the directive has been compiled/evaluated. Hopefully this helps anyone else who runs into this issue.