指令模板加載前指令加載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顯示直到指令已被編譯/評估。 希望這對遇到此問題的其他人有所幫助。