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

Commit

Permalink
feat(ngHref): bind ng-href to xlink:href for SVGAElement
Browse files Browse the repository at this point in the history
This change makes the ngHref directive useful for SVGAElements by having it bind
to the xlink:href attribute rather than the href attribute.

Closes #5904
  • Loading branch information
caitp committed Feb 21, 2014
1 parent c8e03e3 commit 2bce71e
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 2 deletions.
14 changes: 12 additions & 2 deletions src/ng/directive/booleanAttrs.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
});
}
};
Expand Down
24 changes: 24 additions & 0 deletions test/ng/directive/booleanAttrsSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}));
});
}
});

0 comments on commit 2bce71e

Please sign in to comment.