Question

我的ngApp中有多个自定义指令。演示代码是：

<top-nav></top-nav>
<left-sidebar></left-sidebar>
<div class="content">
    ....
</div>

左侧边栏的高度＆＃39;需要根据“顶级导航”的高度进行调整。同样，还有其他相互依赖的UI任务。我想在加载和渲染所有指令之后运行后加载代码（比如app.initializeUI（）;）。

现在，我如何实现这一目标？

编辑：

目前我正在使用以下代码：

App.run(function($timeout){
    $timeout(function(){ app.init() },0);
    });

这很好，但是，我不确定这是完美的方法。

编辑2：

对于想要避免在js中设置样式的人 - 请使用CSS Flexbox。我发现它比计算页面加载后的高度要好得多。我对flexbox here

有了很好的理解

Answer 1

我会创建一个带有隔离范围的属性指令，设置terminal=true并将其添加到您的body标签中。然后在你的链接功能中，设置一个$ watch - isInitialized，它最初是假的。在$ watch处理程序中，调用app.init()，然后取消注册$ watch，以便始终初始化一次。

设置终端指令会产生影响 - 在同一元素上的终端指令之后，没有其他指令可以运行。确保这是你想要的。另一种方法是为您的指令提供尽可能低的值，以便首先编译并最后链接。

此解决方案的重要部分是：

通过将您的指令添加到body标签，您可以确保它最后链接。
通过添加$ watch，您可以确保所有其他指令都经历了摘要周期，因此在调用$ watch处理程序时，所有其他指令都应该已经呈现。

注意事项：在范围变化稳定之前，摘要周期可能会运行几次。上述解决方案仅在第一个循环后运行，如果您真的想要最终渲染，则可能不是您想要的。

加载角度所有指令后调用函数

1 个答案: