javascript - 当 Angular 元素的子元素完成链接时运行脚本

Question

我想知道构建这个简单的 angularJS 场景的最佳方式。

我有一个 <div>其中包含另外两个 <div>秒。当 DOM 准备就绪时，我使用 jQuery splitter plugin使两个 child 变得相当大。

在普通的旧 HTML 中，这没问题!它看起来像这样:

    <div id="container">
        <div id="leftPane">...</div>
        <div id="rightPane">...</div>
    </div>

    <script>
    $('#container').split('horizontal');
    </script>

现在我想将组件转换为 AngularJS 指令，但我遇到了问题。这是根 HTML 模板:

    <div id="container" ng-controller="containerCtrl">
        <left-pane></left-pane>
        <right-pane></right-pane>
    </div>

在哪里leftPane和 rightPane指令是这样的:

app.directive('leftPane', function(){
  return {
    templateUrl: 'leftPane.html',
    replace: true
  }
});

与 leftPane.html :

<div id="leftPane"></div>

和容器 Controller :

app.controller('containerCtrl', ['$scope', function($scope){
    $('#container').split('horizontal');
}]);

问题是当时 .split()调用发生，子面板还没有被编译和评估。

我应该在哪里/怎么调用.split()以确保 child 已经过评估并正确地位于 DOM 中？

---

*** 更新:这是一个 Plunker 演示的问题:http://plnkr.co/edit/idODF0ztbqip44rfsZsE?p=preview

有趣的是，使用文字模板 (template:'<div>left panel</div>') 时没有问题。使用 templateUrl 时出现问题.我猜 templateUrl以不同的顺序评估？

判断发生了什么的最简单方法是在调整拆分器大小时查看 DOM。您可以看到插件正在动态设置 width .但它没有连接到左侧面板。在插件初始化时，左侧 Pane 尚未添加到 DOM。

Answer 1

请注意，link 函数(与 controller 创建不同)在所有子项都已创建并链接后调用。因此，只需将您的拆分器代码放在父指令的 link 函数中即可。

有关执行顺序的更多信息，请考虑 this very helpful blog post .向下滚动到“但是为什么？!？”，您会发现:

parent (compile)
..child 1 (compile)
....child 1 a (compile)
....child 1 b (compile)
..child 2 (compile)
....child 2 a (compile)
....child 2 b (compile)
parent (controller)
parent (pre-link)
..child 1 (controller)
..child 1 (pre-link)
....child 1 a (controller)
....child 1 a (pre-link)
....child 1 a (post-link)
....child 1 b (controller)
....child 1 b (pre-link)
....child 1 b (post-link)
..child 1 (post-link)
..child 2 (controller)
..child 2 (pre-link)
....child 2 a (controller)
....child 2 a (pre-link)
....child 2 a (post-link)
....child 2 b (controller)
....child 2 b (pre-link)
....child 2 b (post-link)
..child 2 (post-link)
parent (post-link)

(请注意，post-link 与默认 link 相同。)

更新

您正在为容器元素使用 Controller 。改为将其更改为指令，一切都会好起来的!