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

【问题标题】：Run a javascript function when Angular has 'finished'当 Angular “完成”时运行 javascript 函数
【发布时间】：2015-06-09 13:04:23
【问题描述】：

“完成”是指所有数据绑定都已完成，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 听起来可能是一个解决方案 - 但我不确定如何使用它。

【问题讨论】：

这真的取决于你所说的角度精加工到底是什么意思。因为 Angular 真的永远不会结束，所以它一直在运行它的摘要循环。每个过程都有不同的规格，所以你不能简单地捕捉到一切都完成的时候（至少我不知道）。但我知道 ng-repeat 和 ng-bind 有几个自定义指令会发出事件让你知道它已经完成（你通过 $scope.$on() 捕获它们） - 虽然并不理想......
啊，我明白了，好的。好吧，更具体地说，我的问题是，虽然 angular 正在做它所做的事情，但我在 dom 中暴露了以下内容：{{ variableName }} 然后（完成后）将被换成variableValue，例如。一旦 这部分 完成，我希望能够展示 Angular 刚刚处理的内容。我基本上是在 DOM 中隐藏丑陋，直到 Angular 完成绑定。
我不确定我是否完全遵循，但听起来你应该使用 ng-show 和 ng-hide。一些例子会非常好，因为在我看来，你不是在等待 angular 完成某事，而是在等待其他一些动作，可能是 promise 或 ajax 请求。你能设置简单的小提琴来展示你想要实现的目标吗？
请查看编辑，非常感谢您迄今为止的帮助。
仍然不是 100% 确定你在“等待”什么来等待 angular 完成，因为一切都很疯狂，但我认为 ng-if 将是正确的选择。检查@user3632710 答案

标签： javascript angularjs

【解决方案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 将删除/重新创建元素，如果条件已验证或未验证。

【讨论】：

请参阅编辑以了解我想要实现的目标，这是一个更好的解释。感谢您的回答。 +1。

【解决方案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>

【讨论】：

【解决方案3】：

这听起来像是一种反模式。你为什么要切换那些div？在上下文中使用指令可能更有意义。

无论如何，如果您认为自己有充分的理由这样做，您可以使用$applyAsync(yourFunction) 安排运行函数。

$applyAsync 将排队等待稍后执行的函数。如果您在 $scope 的初始化期间放置它，那么您的函数将在其余观察者执行后运行。

【讨论】：

我想切换 div，因为我是 Angular 的新手，所以可能会成为 XY 问题的受害者（诚然）。我想要表达的是，我对 DOM 在 Angular 处理绑定之前的样子并不满意。