Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

feat(ngHref): bind href attribute to ng-href attribute in case SVG el… #15694

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 10 additions & 2 deletions src/ng/directive/attrs.js
Original file line number Diff line number Diff line change
Expand Up @@ -399,6 +399,14 @@ 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);
Expand All @@ -419,12 +427,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
Expand Down
23 changes: 21 additions & 2 deletions test/ng/directive/booleanAttrsSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 undefined 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')).toBeUndefined();
expect(child.attr('href')).toBeUndefined();
}
);
});
}
});