Javascript 角度指令与SVG

所以，这有点复杂

我有一个指令，它根据一些标准加载SVG文件。这是一个很大的指令，所以我不会在这里发布，因为它不会影响我的问题，你只需要知道它的存在。 在该指令中，我有一个模板文件，其中包含以下HTML：

<div ng-include="svgPath" onload="loaded()"></div>

注意onload功能。加载SVG后将调用该函数

在这个SVG中，我需要与一些隐藏的组进行交互。因为这改变了DOM，所以我编写了另一个指令，如下所示：

.directive('kdGraphicsRepeater', function () {
    return {
        restrict: 'A',
        scope: {
            targetElementId: '@kdGraphicsRepeater'
        },
        templateUrl: '/assets/tpl/directives/graphicsRepeater.tpl.html',
        link: function (scope, element) {

            // Declare our options
            scope.options = [];

            // Get our target elements
            var target = angular.element(document.getElementById(scope.targetElementId)),
                svg = angular.element(target.find('svg')),
                children = svg.children();

            console.log(target.length);
            console.log(svg.length);
            console.log(children.length);

            // Loop through the SVG children
            for(var i = 0; i < children; i++) {

                // Get the current child
                var child = children[i],
                    childId = child.attr('id');

                console.log(childId);

                // If we have an option
                if (childId && childId.indexOf('options-') > -1) {

                    // Push the name to our options array
                    scope.options.push(childId.replace('options-'));
                }
            }
        }
    }
})

<div ng-repeat="item in options">
    {{ item }}
</div>

指令（'kdGraphicsRepeater'，函数（）{ 返回{ 限制：“A”， 范围：{ targetElementId:“@kdGraphicsRepeater” }, templateUrl:“/assets/tpl/directives/graphicsRepeater.tpl.html”， 链接：功能（范围、元素）{ //宣布我们的选择 scope.options=[]； //获取我们的目标元素 var target=angular.element（document.getElementById（scope.targetElementId））， svg=angular.element（target.find（'svg'））， children=svg.children（）； console.log（target.length）； console.log（svg.length）； console.log（childrence.length）； //循环遍历SVG子项 对于（变量i=0；i-1）{ //将名称推送到我们的选项数组中 scope.options.push（childId.replace（'options-'）； } } } } }) 相应的模板如下所示：

.directive('kdGraphicsRepeater', function () {
    return {
        restrict: 'A',
        scope: {
            targetElementId: '@kdGraphicsRepeater'
        },
        templateUrl: '/assets/tpl/directives/graphicsRepeater.tpl.html',
        link: function (scope, element) {

            // Declare our options
            scope.options = [];

            // Get our target elements
            var target = angular.element(document.getElementById(scope.targetElementId)),
                svg = angular.element(target.find('svg')),
                children = svg.children();

            console.log(target.length);
            console.log(svg.length);
            console.log(children.length);

            // Loop through the SVG children
            for(var i = 0; i < children; i++) {

                // Get the current child
                var child = children[i],
                    childId = child.attr('id');

                console.log(childId);

                // If we have an option
                if (childId && childId.indexOf('options-') > -1) {

                    // Push the name to our options array
                    scope.options.push(childId.replace('options-'));
                }
            }
        }
    }
})

<div ng-repeat="item in options">
    {{ item }}
</div>

{{item}}

你应该能理解的。我正在尝试循环SVG直接子元素，并检查是否有任何元素的部分id与选项-匹配。如果有，我将它们（省略“options-”字符串）添加到scope.options变量中。我的模板只是在它们之间循环显示它们

问题是没有为此指令加载SVG，因此，console.log（SVG.length）返回0。我需要知道SVG何时加载。

---

有人能帮我吗？

好的，我不确定这一点，但可以尝试使用angular的ng if指令

在loaded（）函数中，有一个布尔值，表示其已加载，称为svgLoaded。使用ng init而不是onload。确保该范围与svg中的范围相同

然后在svgPath中，将ng if绑定到布尔值

<"element where you are attaching kdGraphicsRepeater" 
    ng-if="svgLoaded" kdGraphicsRepeater
> 

---

对不起，我假设你们有相同的范围，这是可能的

为表示这些“选项”的SVG元素定义一个指令如何？这些指令与主父指令有一个共享作用域，因此它们可以轻松地通知它它们存在。我猜在加载svg之前正在调用您的指令？@Sergiu svg是从一个我无法控制的文件加载的。@ssayyed是的，这似乎是问题所在。我希望它在加载SVG之前等待SVG加载完成。但是没有任何东西可以阻止您定义一个在所述SVG中的每个

上运行的

循环

指令。-我的意思是，您不需要更改SVG标记。