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

Question

我正在制作一个指令，该指令具有一个加载模板，并带有一些被传递的嵌入内容。所以基本上我的 html 是

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

但是，当我的页面加载时，有一瞬间我只看到页面上的嵌入内容。我猜在页面最初加载和指令模板加载之间存在延迟。有没有办法在指令模板加载之前隐藏嵌入的内容？

非常感谢，这真是一种不和谐的体验，首先快速加载。有谁知道如何解决这个问题？

Answer 1

好吧，好吧，所以我找到了一个可以使用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 在指令被编译/评估之前显示。希望这可以帮助遇到此问题的其他人。

Answer 2

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

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

并定义.ng-hide { display: none }到您的 CSS 文件，否则您可以编写如下内容：

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

希望这可以帮助！

谢谢，
萨