javascript - AngularJS SVG Path directive -
bit of short question, wondering why happening:
in example posted below, there 2 svg elements, each containing directive assigned element. first directive doesn't use template, , setup use assign actions paths.
the second directive trying in order clean code bit, won't drawn.
i googled bit around, , read there difference between svg & dom nodes? since both ng-repeat's working, i'm bit puzzled on going on.
link plunkr: http://plnkr.co/edit/cok6o58souyaghg5jtu5?p=preview
angular.module('app', []).controller("appctrl", function($scope) { $scope.items = [1,2,3,4]; }).directive('svgpathnoreplace', function() { return { restrict: 'a', scope: true, link: function(scope, element, attrs) { } } }).directive('svgpathreplace', function() { return { restrict: 'a', replace: true, template: '<path id="1" d="m 85.750001,0 c 38.393651,0 0,39.02444 0,87.15625 c 0,48.13181 38.393651,87.1875 85.750001,87.1875 c 133.10635,174.34375 171.5,135.28806 171.5,87.15625 171.5,39.02444 133.10635,0 85.750001,0 z m 0,1.5 c 132.28206,1.5 170,39.8217 170,87.15625 c 0,47.33455 -37.71794,85.6875 -84.249999,85.6875 c 39.217941,172.84375 1.5,134.4908 1.5,87.15625 1.5,39.8217 39.217941,1.5 85.750001,1.5 z" '+ 'style="stroke:#000000;stroke-width:1px;"></path>' } });
the current beta (1.3) allows property on directive called type
can specify svg content now.
ie.
return { restrict : 'ae', type : 'svg', template : '<path></path>' link : function (..) }
Comments
Post a Comment