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。

<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函数，并按 angular way 进行。

如果只是为了切换divs的可见性，请考虑使用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期间放置它，那么你的函数将在其余的观察者执行后运行。

当Angular“完成”时运行javascript函数

3 个答案: