代码之家 › 专栏 › 技术社区 › Alex

角度指令:SVG元素的DOM操作

directive dom angularjs

Alex · 技术社区 · 8 年前

我在试图从Angular 1.x指令将元素操作到SVG中时遇到了一个问题。

旁注 :我试图通过Angular在Chartest绘制的条形图上显示静态值。

以下是HTML标记(很抱歉,如果我插入换行符,它会破坏代码样式):

<chartist class="ct-chart ct-minor-seventh chartBarLabel ng-isolate-scope" chartist-data="testData" chartist-chart-type="Bar" chartist-chart-options="testOptions">
            <svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-bar ct-horizontal-bars" style="width: 100%; height: 100%;"><g class="ct-grids"><line y1="368" y2="368" x1="50" x2="702" class="ct-grid ct-vertical"></line><line y1="279.75" y2="279.75" x1="50" x2="702" class="ct-grid ct-vertical"></line><line y1="191.5" y2="191.5" x1="50" x2="702" class="ct-grid ct-vertical"></line><line y1="103.25" y2="103.25" x1="50" x2="702" class="ct-grid ct-vertical"></line><line x1="50" x2="50" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="109.27272727272728" x2="109.27272727272728" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="168.54545454545456" x2="168.54545454545456" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="227.8181818181818" x2="227.8181818181818" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="287.0909090909091" x2="287.0909090909091" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="346.3636363636364" x2="346.3636363636364" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="405.6363636363636" x2="405.6363636363636" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="464.90909090909093" x2="464.90909090909093" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="524.1818181818182" x2="524.1818181818182" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="583.4545454545455" x2="583.4545454545455" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="642.7272727272727" x2="642.7272727272727" y1="15" y2="368" class="ct-grid ct-horizontal"></line><line x1="702" x2="702" y1="15" y2="368" class="ct-grid ct-horizontal"></line></g><g><g class="ct-series ct-series-a"><line y1="323.875" y2="323.875" x1="50" x2="166.17454545454547" class="ct-bar" value="98"></line><line y1="235.625" y2="235.625" x1="50" x2="142.46545454545455" class="ct-bar" value="78"></line><line y1="147.375" y2="147.375" x1="50" x2="229.00363636363636" class="ct-bar" value="151"></line><line y1="59.125" y2="59.125" x1="50" x2="668.8072727272727" class="ct-bar" value="522"></line></g></g><g class="ct-labels"><foreignObject style="overflow: visible;" y="279.75" x="10" height="88.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 88px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">Other</span></foreignObject><foreignObject style="overflow: visible;" y="191.5" x="10" height="88.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 88px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">Windows Phone</span></foreignObject><foreignObject style="overflow: visible;" y="103.25" x="10" height="88.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 88px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">iOS</span></foreignObject><foreignObject style="overflow: visible;" y="15" x="10" height="88.25" width="30"><span class="ct-label ct-vertical ct-start" style="height: 88px; width: 30px" xmlns="http://www.w3.org/1999/xhtml">Android</span></foreignObject><foreignObject style="overflow: visible;" x="50" y="373" width="59.27272727272727" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">0</span></foreignObject><foreignObject style="overflow: visible;" x="109.27272727272728" y="373" width="59.27272727272727" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">50</span></foreignObject><foreignObject style="overflow: visible;" x="168.54545454545456" y="373" width="59.272727272727266" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">100</span></foreignObject><foreignObject style="overflow: visible;" x="227.8181818181818" y="373" width="59.27272727272728" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">150</span></foreignObject><foreignObject style="overflow: visible;" x="287.0909090909091" y="373" width="59.27272727272728" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">200</span></foreignObject><foreignObject style="overflow: visible;" x="346.3636363636364" y="373" width="59.27272727272725" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">250</span></foreignObject><foreignObject style="overflow: visible;" x="405.6363636363636" y="373" width="59.27272727272731" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">300</span></foreignObject><foreignObject style="overflow: visible;" x="464.90909090909093" y="373" width="59.27272727272725" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">350</span></foreignObject><foreignObject style="overflow: visible;" x="524.1818181818182" y="373" width="59.27272727272731" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">400</span></foreignObject><foreignObject style="overflow: visible;" x="583.4545454545455" y="373" width="59.27272727272725" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">450</span></foreignObject><foreignObject style="overflow: visible;" x="642.7272727272727" y="373" width="59.27272727272725" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 59px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">500</span></foreignObject><foreignObject style="overflow: visible;" x="702" y="373" width="30" height="20"><span class="ct-label ct-horizontal ct-end" style="width: 30px; height: 20px" xmlns="http://www.w3.org/1999/xhtml">550</span></foreignObject></g></svg></chartist>

这是我的指示:

angular.module('myapp').directive('chartBarLabel', function() {
    return {
        restrict: 'C',
        link: function(scope, elem, attr, ctrl) {
            var $chart =  elem.children()[0]; // without [0] it doesn't works too :(
            $chart.append("<p>testerino</p>");

            var tst = elem.parent(); // it works, it get me the parent html
            console.log(tst);
        }
    }
});

我还试图访问HTML元素'。带以下部件的ct棒:

var bar = elem.find('.ct-bar');
var bar2 = angular.element(elem.find(.ct-bar));
var bar3 = angular.element(elem).querySelector('.ct-bar');

但都不管用。我访问这些元素的唯一方法是进入事件:

$chart.on('click', '.ct-bar', function() {
       var bar = $(this);
       bar.append("<label>" +  bar.attr('ct:value') + "</label>");
       console.log("OKKK? ");
});

在这种情况下,当我单击时,我正确地将数据添加到bars元素中。但我希望它在没有任何事件的情况下被访问,只需调用指令即可。

编辑 :我怀疑在尝试访问元素时没有生成svg,但在这种情况下,超时事件无法检索任何子元素。

看起来很容易,但我发誓我被卡住了:(

谢谢你的帮助!

1 回复 | 直到 8 年前

Alex 8 年前

在我尝试访问元素时,没有生成SVG。

我使用了$timeout角度分量,传递给我的指令,我做了这样的事情:

$timeout(function() {
       var legendValues = [];

       angular.forEach(angular.element(".ct-point"), function(value, key) {
               legendValues.push(angular.element(value).attr('ct:meta'));
       });
       // do other stuff ...
});

我花了很长时间才弄明白,因为我已经通过设置一个setInterval函数来尝试了这个选项,在这个函数中我试图访问元素,但它不起作用。但也许我做错了,没有使用角度。元素包装在这个特定时刻。。。