AngularJS - 如何避免使用 $timeout 等待创建元素？

Question

这个想法是这样的:

因此，我尝试使用外部库函数在 ng-repeat 连接到的 Controller 之一的 DOM 中创建一些操作。

最新的 jsFiddle 可以工作，但是......

http://jsfiddle.net/GeorgiAngelov/KRbdL/150/

所以基本上我在@BrandonTilley的帮助下让它工作，但我试图避免使用$timeout，因为我不认为这是一个可行的解决方案，而是一个黑客。

在@BrandonTilley的帮助下新 fiddle

添加了 onload 监听器，我还尝试通过 getElementById 获取新元素或其父元素，但它返回的所有内容都是 NULL。

http://jsfiddle.net/GeorgiAngelov/KRbdL/143/

问题如下:我在 Controller 中调用外部函数，将元素添加到 ng-repeat array 中，这实际上将新元素添加到 DOM 中。但是，当我在 Controller 内部时，该元素还不存在，即使我已将其添加到数组中。

如何绑定(bind)一个外部函数，以便在元素实际附加到 DOM 后调用，而不是在元素实际添加到控制 ng-repeat 的数组中时调用？

问题是我有模板1调用模板2，然后模板2调用模板3，然后模板3回调模板2，我想在模板3完成渲染模板2后将模板3中的元素连接到模板2。

我创建了一个链接到 template3 的指令，并且使用了 $last 属性，但它仍然无法工作，因为 template3 加载但我不知道 template2 何时完成加载。此外，element.ready() 甚至没有触发向上。我还尝试使用 $timeout 来破解它并删除 element.ready，但它仍然给我一个子元素尚不存在的错误。我不想使用 $timeout，因此我正在寻找更实用的解决方案来解决我的问题。

此外，当我调用该函数来创建新的第一级元素时，我尝试调用 jsPlumb 库，但它给出了parentNode 未定义。我在 addChild 函数中注释掉了它。

ng-repeat ng-include=template2 上的模板 3 中使用的指令

app.directive('vectorDrawDirective', function($timeout) {
    return function($scope, element, attrs) {
        //angular.element(element).css('color','blue');
        if ($scope.$last === true) {
            element.ready(function() {
            jsPlumb.connect({
                    source: $scope.firstlevel.parent_id,
                    target: $scope.firstlevel.id,
                });
                jsPlumb.repaintEverything();    
        })
        }
    }
});

这是我制作的图表，旨在帮助您直观地了解我想要完成的任务(查看右上角的文字)

Answer 1

ngInclude 提供了一个 onload 属性，该属性将在加载表达式时对其求值；这能满足您的需要吗？

<div vector-draw-directive class="thirdlevel"
  ng-repeat="firstlevel in secondlevel.children"
  ng-include="'templateLevel2.html'" onload="loaded()">
</div>

非常基本的示例:http://jsfiddle.net/BinaryMuse/KRbdL/121/