AngularJS SVG Path directive

Question

Bit of a short question, but wondering why this is happening:

In the example posted below, there are two SVG elements, each containing a directive assigned to a element. The first directive doesn't use a template, and is the setup I currently use to assign actions to paths.

The second directive is what I was trying to do in order to clean up my code a bit, but it won't be drawn.

I googled a bit around, and read there is a difference between SVG & DOM nodes? But since both ng-repeat's are working, I'm a bit puzzled on what is going on.

Link to 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>'
  }
});

Answer 1

The most current beta (1.3) allows another property on the directive called type where you can specify svg content now.

ie.

return {
    restrict : 'AE',
    type : 'svg',
    template : '<path></path>'
    link : function (..)
}

Answer 2

Your initial research was correct -- in AngularJS, templates are rendered as DOM nodes, not SVG nodes. This means the directive's template is rendering your <path> tag as a "dummy" non-standard HTML tag that does nothing.

In other words, although HTML normally recognizes path nodes as non-standard nodes, it's preconfigured to know how to handle them using SVG. But when HTML sees a non-standard DOM node rendered by the template (which in this example just happens to be named path ), it doesn't recognize it and therefore does nothing. Think of it as trying to use <foo></foo> .

However, this doesn't mean the ng-repeat directive won't work on the custom DOM node, since it doesn't care what type of node (ie, standard or custom) it is repeating.

Updated Plunker

The above example solves your problem by manually creating the HTML node using the directive's link function instead of its template key. The helper function creates the path node in a way that can be recognized by SVG, which eliminates the need to use a template.

My answer is inspired by this solution .