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

Question

这是一个想法：

所以我试图使用外部库函数在我的ng-repeat所连接的控制器中的DOM中创建一些操作。

最新的jsFiddle工作，但......

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

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

@BrandonTilley帮助下的新小提琴

添加了onload侦听器，我也试图通过getElementById获取新元素或其父元素，但它返回的只是NULL。

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

问题如下： 我在我的控制器中调用了外部函数，它将元素添加到ng-repeat数组中，这在术语中将新元素添加到DOM中。但是，当我在控制器内部时，该元素尚不存在，即使我已将其添加到数组中。

如果元素实际上已经附加到DOM，而不是实际添加到控制ng-repeat的数组时，如何绑定要调用的外部函数？

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

我创建了一个链接到template3的指令，我使用了$ last属性，但由于template3加载但仍然无效，但我不知道template2何时完成加载。此外，element.ready（）甚至不会触发起来。我也尝试使用$ timeout和删除element.ready进行黑客攻击，但它仍然给了我一个错误，即子元素还没有存在。我不想使用$ timeout，所以我正在为我的问题寻找更实用的解决方案。

另外，我在调用函数创建一个新的firstlevel元素时尝试调用jsPlumb库，但是它给了parentNode undefined。我在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/

Answer 2

您可以有点使用window.requestAnimationFrame回调来确定何时完成角度操作DOM，如下所示：

var fn = function () {
    var elm = document.getElementById('elementID');

    if(elm == null) {
        window.requestAnimationFrame(fn);
    } else {
        doSomething();
    }
};
fn();

这是一个黑客，所以使用风险自负