指令模板加载前指令加载ng-transclude内容

Question

我正在制作一个指令，该指令具有要加载的模板，并带有传递的某些已包含内容。因此，基本上我的html是

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

但是，当我的页面加载时，在一瞬间，我只会在页面上看到被包含的内容。 我猜测页面最初加载与指令模板加载之间会有延迟。 有没有一种方法可以隐藏已包含的内容，直到加载指令模板为止？

非常感谢您，首先快速加载该负载确实是一次令人不快的体验。 有谁知道如何解决这个问题？

Answer 1

将ng-hide类添加到您的指令临时文件中，当angular起作用时，它将自动被删除。

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

并在CSS文件中定义.ng-hide { display: none } ，否则您可以编写如下代码：

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

希望这可以帮助！

谢谢，
南非

Answer 2

好吧，好的，所以我找到了一个使用ngCloak的解决方案。 我按照这里的说明，添加了这个CSS

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

和我的指令的ng-cloak指令

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

这样可以防止div显示直到指令已被编译/评估。 希望这对遇到此问题的其他人有所帮助。