feat(ngHref): bind href attribute to ng-href attribute in case SVG element

Author: m-amr

src/ng/directive/attrs.js

@@ -399,6 +399,15 @@ forEach(ALIASED_ATTR, function(htmlAttr, ngAttr) {
   };
 });
 
+
+// Helper
+var updateAttribute = function(attr, name, value) {
+  attr.$set(name, value);
+
+  if (name === 'xlinkHref') {
+    attr.$set('href', value);
+  }
+};
 // ng-src, ng-srcset, ng-href are interpolated
 forEach(['src', 'srcset', 'href'], function(attrName) {
   var normalized = directiveNormalize('ng-' + attrName);
@@ -419,12 +428,12 @@ forEach(['src', 'srcset', 'href'], function(attrName) {
         attr.$observe(normalized, function(value) {
           if (!value) {
             if (attrName === 'href') {
-              attr.$set(name, null);
+              updateAttribute(attr, name, null);
             }
             return;
           }
 
-          attr.$set(name, value);
+          updateAttribute(attr, name, value);
 
           // Support: IE 9-11 only
           // On IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist

test/ng/directive/booleanAttrsSpec.js

@@ -299,25 +299,44 @@ describe('ngHref', function() {
 
   if (isDefined(window.SVGElement)) {
     describe('SVGAElement', function() {
-      it('should interpolate the expression and bind to xlink:href', inject(function($compile, $rootScope) {
+      it('should interpolate the expression and bind to xlink:href and 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/');
+        expect(child.attr('href')).toEqual('some/');
 
         $rootScope.$apply(function() {
           $rootScope.id = 1;
         });
         expect(child.attr('xlink:href')).toEqual('some/1');
+        expect(child.attr('href')).toEqual('some/1');
       }));
 
 
-      it('should bind xlink:href even if no interpolation', inject(function($rootScope, $compile) {
+      it('should bind xlink:href and 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');
+        expect(child.attr('href')).toEqual('http://server');
       }));
+
+      they('should set xlink:href and href to null when ng-href value is $prop', ['', 0, null, false, undefined],
+          function (value) {
+            var $compile, $rootScope;
+            inject(function(_$compile_, _$rootScope_){
+              $compile = _$compile_;
+              $rootScope = _$rootScope_;
+            });
+
+            $rootScope.url = value;
+            element = $compile('<svg><a ng-href="{{url}}"></a></svg>')($rootScope);
+            var child = element.children('a');
+            expect(child.attr('xlink:href')).toBeNull();
+            expect(child.attr('href')).toEqual('some/');
+          }
+      );
     });
   }
 });