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/