i'm having issue trying manipulate elements svg angular 1.x directive.
sidenote : m trying display static values on bars drawn chartist via angular.
here html markup (sorry formating, breaks code style if insert line feed):
<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> here directive :
angular.module('myapp').directive('chartbarlabel', function() { return { restrict: 'c', link: function(scope, elem, attr, ctrl) { var $chart = elem.children()[0]; // without [0] doesn't works :( $chart.append("<p>testerino</p>"); var tst = elem.parent(); // works, me parent html console.log(tst); } } }); i tried access html element '.ct-bar' following pieces :
var bar = elem.find('.ct-bar'); var bar2 = angular.element(elem.find(.ct-bar)); var bar3 = angular.element(elem).queryselector('.ct-bar'); but none work. way managed access theses elements event :
$chart.on('click', '.ct-bar', function() { var bar = $(this); bar.append("<label>" + bar.attr('ct:value') + "</label>"); console.log("okkk? "); }); in case when click, correctly append data bars element. want accessed without event, call of directive.
edit : suspect svg not being generated when try accessing elements, in case event timeout can't retrieve child element.
seems easy, swear i'm stuck :(
thanks help!
it svg not being generated @ time tried access elements.
i used $timeout angular component, passed directive, , i've done :
$timeout(function() { var legendvalues = []; angular.foreach(angular.element(".ct-point"), function(value, key) { legendvalues.push(angular.element(value).attr('ct:meta')); }); // other stuff ... }); it took long me figure out because tried option setting setinterval function in trying access element, , not working. maybe did wrong, not using angular.element wrapper @ particular moment ...
Comments
Post a Comment