title: AngularJS ng-href and svg xlink
body: <p>I'd like some input on using xml namespaced attributes with angular.</p>
  
  <p>The problem is angular comes with a couple of directives to handle writing attributes such as href and src when angular has parsed the expresssions (otherwise the browser will try to load <code>{{mymodel.myimage}}</code> as a url)</p>
  
  <p><a href="https://github.com/angular/angular.js/blob/master/src/ng/directive/booleanAttrs.js#L329" rel="noreferrer">https://github.com/angular/angular.js/blob/master/src/ng/directive/booleanAttrs.js#L329</a></p>
  
  <p>The problem I'm facing is that I'm using angular to output svg together with D3 and since angular doesn't have a way to output <code>xlink:href</code> I was stuck.</p>
  
  <p>I created a custom directive that outputs xlink:href</p>
  
  <pre><code>app.directive('ngXlinkHref', function () {
    return {
      priority: 99,
      restrict: 'A',
      link: function (scope, element, attr) {
        var attrName = 'xlink:href';
        attr.$observe('ngXlinkHref', function (value) {
          if (!value)
            return;
  
          attr.$set(attrName, value);
        });
      }
    };
  });
  </code></pre>
  
  <p>Full demo: <a href="http://plnkr.co/edit/cMhGRh" rel="noreferrer">http://plnkr.co/edit/cMhGRh</a></p>
  
  <p>But it seems that if I don't manually add xlink:href to the element, the svg image will not render.</p>
  
  <p>Any suggestions on how to best handle xml namespaces / svg together with angular would be greatly appreciated.</p>