Angular 指令：SVG 元素的 DOM 操作答案

【问题标题】：Angular directive : DOM manipulation for SVG elementAngular 指令：SVG 元素的 DOM 操作
【发布时间】：2016-02-03 19:15:44
【问题描述】：

我在尝试将 Angular 1.x 指令中的元素操作为 SVG 时遇到问题。

旁注：我正在尝试在 Chartist 通过 Angular 绘制的条形图上显示静态值。

这是 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-bar”：

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? ");
});

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

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

看起来很简单，但我发誓我被卡住了:(

感谢您的帮助！

【问题讨论】：

Chartist 或 ChartJS 错过了这种功能（将标签、值或标签：值悬停在图表部分或静态上）。我回去了，但我想不通，我可以添加一个带有事件侦听器的 DOM 元素，但我不能使用类似于“绘制”的事件，在页面加载时添加它。

标签： angularjs dom directive

【解决方案1】：

这是我尝试访问元素时未生成 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 函数尝试了这个选项，但它不起作用。但也许我做错了，在这个特定时刻没有使用 angular.element 包装器......

【讨论】：