SVG attribute directive with replace:false does not include template in Internet Explorer

[hansmaad]

I am writing some SVG directives that should insert svg templates. Since replace is marked as deprecated I try to use an attribute directive on a g element like here: http://stackoverflow.com/a/28281587/498298

angular.module('app', []).directive('myRect', function() {
  return {
    restrict: 'A',
    templateNamespace: 'svg',
    template: '<rect x="20" y="20" width="100" height="50" fill="blue" />'
  };
})

It works in Chrome, but in IE11 the <g my-rect></g> is empty.

I'm not sure if I'm right, but I think the problem is in $compileNode.html(directiveValue); which sets innerHTML even for SVG templates. While supported in Chrome, IE seems not to support innerHTML for SVGElements.

I can fix the problem by using the same code as for replace:true case:
hansmaad@2488eed

[wesleycho]

For performance reasons, you should probably add a conditional to check whether the browser is IE or not - the current change would penalize the other browsers' performance, so it would be important to have it execute only for IE.

I would say it is worth opening a pull request.

[hansmaad]

Unfortunately, the grunt tasks don't run well on my Win7 machine in the office, so I can't add and run tests for this. Even npm install fails with cb() never called!. I dunno if I manage to get time to work on this at home.

[dpogue]

This is actually broken in IE9 through IE11, but might work if an innerHTML polyfill is used (such as https://github.com/dnozay/innersvg-polyfill)

[Tragetaschen]

I'm having the same problem with <g ng-view=""/> not working at all in Internet Explorer, but in all other browsers. An <g ng-include="'…'"/> does work, though.

Using the mentioned polyfill fixes this.