12

这是想法：

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

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

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

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

在@BrandonTilley 的帮助下制作新小提琴

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

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

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

一旦元素实际附加到 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();    
        })
        }
    }
});

这是我为帮助您可视化我要完成的内容而制作的图表（查看右上角的文字）

在此处输入图像描述

4

2 回答 2

7

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/

于 2013-07-12T16:19:31.607 回答
1

您可以使用回调来确定Angularwindow.requestAnimationFrame何时完成对 DOM 的操作，如下所示：

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

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

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

于 2016-10-14T13:25:41.123 回答