directive from class on svg element

[blazsvigelj]

I'm trying to create test directive on SVG element with class selector and it doesn't work. It works as attribute or element.

app.directive('test', function(){
  return {
    restrict: 'AEC',
    templateNamespace: 'svg',
    template: '<svg><circle cx="10" cy="10" r="10" /></svg>',
    replace: true
  };
})

<svg class='test' />      #bug
<svg test />              #ok
<test></test>             #ok
<div class="test"></div>  #ok

I created a plunker: http://plnkr.co/edit/XJevcJgrYy3l5MvOqg59?p=preview

[aabenoja]

Ah, it looks like node.className for an svg gives us an SvgAnimatedString object:

{
  animVal: "test",
  baseVal: "test"
}

So when we get to the step where we're checking to see if node.className is a string the test fails and we don't invoke addDirective() on the class. This explains why your plunker works when applying the class to a div, but not a svg.

EDIT:

Here is the code block in the $compile service where the check occurs and is failing.

[Narretz]

@aabenoja Thanks for investigating. As far as I am concerned nothing speaks against fixing this. Unless it hurts performance. @caitp you have done lots of stuff for svg, can you take a look?

[caitp]

if I recall, we weren't going to fix this because class-directives were not widely used. But it may have just been comment directives that I'm thinking of.

[aabenoja]

I'm not very familiar with svgs. What is the difference in using animVal and baseVal?

[caitp]

animVal is as it sounds like, the value during animation --- it is the same as the baseVal in other cases, though