当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初始化期间放置了该函数，则函数将在其余观察者执行后运行。