在加载指令模板之前加载指令 ng 包含内容

Directive loading ng-transclude content before directive template loaded

本文关键字：加载 指令 ng 包含内      更新时间：2023-09-26

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

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

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

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

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

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

希望这有帮助！

谢谢
南非

相关文章：