當Angular完成時運行javascript函數

Question

“完成”是指所有數據綁定均已完成，並且Angular javascript無需運行任何操作（直到用戶與DOM交互）。

我需要調用一個已有的javascript函數（fwiw，只需切換幾個div的顯示）。

我嘗試過的

我想嘗試避免使用超時：

http://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/

角度需要花費多長時間是任意的，並且對我來說准確地使用時間間隔取決於太多。

我也嘗試過app.run(function().... ，但是運行太早了！

編輯（為澄清）

將這種情況想象為2格。

<div class="static">SOME CONTENT</div>

和

<div class="angular">{{ someContent }}</div>

在頁面加載（最初）時，用戶將看到{{ someContent }}直到Angular完成為止。 我想隱藏此角度div，只顯示靜態div，然后交換它們（即，靜態變為隱藏，角度變為可見），一旦{{ someContent }}呈現出來。 我想做的事情確實非常簡單， ng-show聽起來可能是一個解決方案-但我不確定如何使用它。

Answer 1

如果app.run(function() { ... }); 為時過早，並且您不想使用$timeout也許您應該重構要調用的javascript函數並以有角度的方式進行操作 。

如果僅是切換div可見性，請考慮使用ng-show / ng-hide 。 您還可以使用ng-if有條件地刪除或重新創建dom樹的一部分。 這取決於功能的目的，也許自定義指令適合您的情況。

如果要在填充變量數據后顯示一些變量數據的示例：

<div ng-if='myVar'>
    <span>{{myVar}}</span>
</div>

根據編輯的問題進行了更新：

<div ng-if='!myVar' class='static'>
    <span>STATIC CONTENT</span>
</div>
<div ng-if='myVar' class='angular'>
    <span>{{myVar}}</span>
</div>

ng-show/ng-hide可能再次起作用，但請不要忘記它們僅切換元素的可見性。 如果條件已驗證或未驗證， ng-if將刪除/重新創建元素。

Answer 2

//using ng-if
<div ng-if="!someContent" class="static">SOME CONTENT</div>
<div ng-if="someContent" class="angular">{{ someContent }}</div>

//using ng-hide/show
<div ng-hide="someContent" class="static">SOME CONTENT</div>
<div ng-show="someContent" class="angular">{{ someContent }}</div>

Answer 3

這聞起來像是反模式。 您為什么要切換這些div？ 在上下文中使用指令可能更有意義。

無論如何，如果您認為這樣做有充分的理由，則可以使用$applyAsync(yourFunction)安排要運行的函數。

$applyAsync將使該函數排隊，以便以后執行。 如果在$scope初始化期間放置了該函數，則函數將在其余觀察者執行后運行。