[英]Directive loading ng-transclude content before directive template loaded
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 我正在制作一个指令,该指令具有要加载的模板,并带有传递的某些已包含内容。因此,基本上我的html是
<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?
有谁知道如何解决这个问题?
Add the class ng-hide
to your directive temporary and it will be removed automatically as soon as angular comes in action. 将
ng-hide
类添加到您的指令临时文件中,当angular起作用时,它将自动被删除。
<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: 并在CSS文件中定义
.ng-hide { display: none }
,否则您可以编写如下代码:
<my-directive>
<div ng-bind="Some transcluded content"></div>
</my-directive>
Hope This helps! 希望这可以帮助!
Thanks, 谢谢,
SA 南非
Well, ok so I've found a solution that works using ngCloak
. 好吧,好的,所以我找到了一个使用
ngCloak
的解决方案。 I followed the instructions here , adding this css 我按照这里的说明,添加了这个CSS
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
and the ng-cloak
directive to my directive 和我的指令的
ng-cloak
指令
<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. 这样可以防止div显示直到指令已被编译/评估。 Hopefully this helps anyone else who runs into this issue.
希望这对遇到此问题的其他人有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.