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

Question

我正在制作一个带有加载模板的指令，其中包含一些被传入的内容。所以基本上我的html是

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

但是，当我的页面加载时，我会在一瞬间看到页面上的被抄送的内容。我猜测在页面最初加载和加载指令模板之间存在延迟。有没有办法隐藏已转换的内容，直到指令模板加载？

非常感谢，这真的是一种非常快速的负担。有谁知道如何解决这个问题？

Answer 1

将类ng-hide添加到您的指令临时，一旦角度出现，它就会自动删除。

<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>

希望这有帮助！

谢谢，
SA

Answer 2

好吧，好的，我发现了一个使用ngCloak的解决方案。我按照说明here添加了此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。希望这有助于遇到此问题的其他任何人。