feat(ngHref): bind ng-href to xlink:href for SVGAElement

src/ng/directive/booleanAttrs.js

@@ -369,17 +369,27 @@ forEach(['src', 'srcset', 'href'], function(attrName) {
     return {
       priority: 99, // it needs to run after the attributes are interpolated
       link: function(scope, element, attr) {
+        var propName = attrName,
+            name = attrName;
+
+        if (attrName === 'href' &&
+            toString.call(element.prop('href')) === '[object SVGAnimatedString]') {
+          name = 'xlinkHref';
+          attr.$attr[name] = 'xlink:href';
+          propName = null;
+        }
+
         attr.$observe(normalized, function(value) {
           if (!value)
              return;
 
-          attr.$set(attrName, value);
+          attr.$set(name, value);
 
           // on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist
           // then calling element.setAttribute('src', 'foo') doesn't do anything, so we need
           // to set the property as well to achieve the desired effect.
           // we use attr[attrName] value since $set can sanitize the url.
-          if (msie) element.prop(attrName, attr[attrName]);
+          if (msie && propName) element.prop(propName, attr[name]);
         });
       }
     };

test/ng/directive/booleanAttrsSpec.js

@@ -251,4 +251,28 @@ describe('ngHref', function() {
     $rootScope.$digest();
     expect(element.attr('href')).toEqual('http://server');
   }));
+
+  if (isDefined(window.SVGElement)) {
+    describe('SVGAElement', function() {
+      it('should interpolate the expression and bind to xlink:href', inject(function($compile, $rootScope) {
+        element = $compile('<svg><a ng-href="some/{{id}}"></a></svg>')($rootScope);
+        var child = element.children('a');
+        $rootScope.$digest();
+        expect(child.attr('xlink:href')).toEqual('some/');
+
+        $rootScope.$apply(function() {
+          $rootScope.id = 1;
+        });
+        expect(child.attr('xlink:href')).toEqual('some/1');
+      }));
+
+
+      it('should bind xlink:href even if no interpolation', inject(function($rootScope, $compile) {
+        element = $compile('<svg><a ng-href="http://server"></a></svg>')($rootScope);
+        var child = element.children('a');
+        $rootScope.$digest();
+        expect(child.attr('xlink:href')).toEqual('http://server');
+      }));
+    });
+  }
 });