Javascript 当角度元素'；孩子们已经完成了连接

我想知道构造这个简单angularJS场景的最佳方法

我有一个

，其中包含另外两个

s。当DOM准备好后，我使用一个函数使这两个子对象变得相当大

在普通的旧HTML中，这是没有问题的！它看起来像这样：

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

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

使用

leftPane.html

：

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

问题是在调用

.split（）

时，子面板尚未编译和评估

我应该在何处/如何调用

.split（）

，以确保子级已被计算并正确地位于DOM中

---

***更新：下面是一个Plunker演示了这个问题：

有趣的是，使用文字模板时没有问题（

模板：'left panel'

）。使用

模板URL

时会出现问题。我猜

templateUrl

的计算顺序不同吧

---

判断发生了什么的最简单方法是在调整拆分器大小的同时查看DOM。您可以看到插件正在动态设置

宽度

。但它没有连接到左侧面板。插件初始化时，左窗格还没有添加到DOM中。

如果我是你，我会用另一种方法，如下所示：

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

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

视图：

---

请注意，

link

函数（与创建

controller

不同）是在创建并链接所有子项后调用的。因此，只需将拆分器代码放入父指令的

link

函数中即可

<>关于执行顺序的更多信息，请考虑。向下滚动到“但是为什么？！？”，您将发现：

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链接与默认的

链接

相同）

更新

---

您正在为容器元素使用控制器。改成指令，一切都会好起来的

在控制器中进行DOM操作是个坏主意。但是，您可以将其包装在

$timeout

中，以确保在angular呈现内容后运行。您建议改为什么？放弃这个，使用一个角度更友好的库？DOM操作的哪一部分是问题：

replace:true

，还是拆分器的DOM操作？对于DOM操作，我更喜欢在一个方向内进行操作。因此，基本上，我必须在这个范围内使我的面板具有

？有些情况下，这不是很干净。这个元素不是一个

，它是面板真正想要的任何东西。如果它是div或不是div，为什么它需要映射器呢。指令不需要始终呈现模板。。它也可以在属性级别进行检索。无论如何，您是否尝试过

$timeout（function（）{$（'#container'）.split（'horizontal'）；}）什么是拆分？一些插件的问题是窗格还没有通过Angular评估。因此，在调用
split（）
时，子元素是
，因此拆分器会处理尚未删除/替换的DOM元素。@tenfour我建议的是创建一个应该在容器中使用的指令，这应该可以用。@tenfour如果您想用使用jQuery的示例设置一个plunker（没有角度）我将向您展示我认为您应该如何使用angularI添加了一个plunker并对问题进行了最少的修改。不，我认为您考虑的是
ng包含
属性。您的示例将出错，说它无法加载
'leftPane.html'
，我发现情况并非如此。即使我将外部容器设为directive、 并调用
split（）
在
链接：
中，孩子们还没有被处理，并显示为
等@tenfour你能帮我们处理一下吗？还是太多的代码？我今晚晚些时候会做些事情；我得走了。谢谢你的帮助。我编辑了这个问题，加入了一个plunker来演示这个问题。实际上，它只是重新编程使用
templateUrl
；如果我将文本模板与
template:
@tenfour一起使用，那么行为会很好。我猜在角度执行顺序中没有考虑必须获取模板的异步性质。这意味着执行顺序没有得到保证。在这种情况下，您需要显式同步 :/
app.controller('containerCtrl', ['$scope', function($scope){
    $('#container').split('horizontal');
}]);

<div my-splitter="vertical" class="container">
  <left-pane my-splitter-split></left-pane>
  <right-pane></right-pane>
</div>

app.directive('mySplitter', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, ctrl) {
      ctrl.orientation=attrs.mySplitter;
    },
    controller: function($element){
      this.split = function(){
        var orientation= this.orientation;
        $element.split({
          orientation: orientation
        });
      }
    }
  };
});

app.directive('mySplitterSplit', function(){
  return {
    require: '^mySplitter',
    restrict: 'A',
    link: function(scope, element, attrs, splitterCtrl) {
        splitterCtrl.split(); 
      }
  };
});

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)