fix(a): workaround IE bug affecting mailto urls

Apparently there is a really weird bug in IE6-8 that causes anchor textContent
to be reset with href content when both contain @ symbol.

Inserting a bogus comment node into all anchor elements in IE works around this
browser bug.

I'm fixing the issue via directive because that way we'll fix it for jQuery as
well.

I fixed an e2e test too because it was incorrect.

Closes #1949
This commit is contained in:
Igor Minar 2013-02-14 15:13:50 -08:00
parent 526a6b31e5
commit 8043784fd7
3 changed files with 34 additions and 9 deletions

View file

@ -16,10 +16,20 @@
var htmlAnchorDirective = valueFn({ var htmlAnchorDirective = valueFn({
restrict: 'E', restrict: 'E',
compile: function(element, attr) { compile: function(element, attr) {
// turn <a href ng-click="..">link</a> into a link in IE
// but only if it doesn't have name attribute, in which case it's an anchor if (msie <= 8) {
if (!attr.href) {
attr.$set('href', ''); // turn <a href ng-click="..">link</a> into a stylable link in IE
// but only if it doesn't have name attribute, in which case it's an anchor
if (!attr.href && !attr.name) {
attr.$set('href', '');
}
// add a comment node to anchors to workaround IE bug that causes element content to be reset
// to new attribute content if attribute is updated with value containing @ and element also
// contains value with @
// see issue #1949
element.append(document.createComment('IE fix'));
} }
return function(scope, element) { return function(scope, element) {

View file

@ -66,7 +66,7 @@
it('should execute ng-click but not reload when no href but name specified', function() { it('should execute ng-click but not reload when no href but name specified', function() {
element('#link-5').click(); element('#link-5').click();
expect(input('value').val()).toEqual('5'); expect(input('value').val()).toEqual('5');
expect(element('#link-5').attr('href')).toBe(''); expect(element('#link-5').attr('href')).toBe(undefined);
}); });
it('should only change url when only ng-href', function() { it('should only change url when only ng-href', function() {

View file

@ -1,7 +1,13 @@
'use strict'; 'use strict';
describe('a', function() { describe('a', function() {
var element; var element, $compile, $rootScope;
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
afterEach(function(){ afterEach(function(){
@ -9,8 +15,7 @@ describe('a', function() {
}); });
it('should prevent default action to be executed when href is empty', it('should prevent default action to be executed when href is empty', function() {
inject(function($rootScope, $compile) {
var orgLocation = document.location.href, var orgLocation = document.location.href,
preventDefaultCalled = false, preventDefaultCalled = false,
event; event;
@ -42,5 +47,15 @@ describe('a', function() {
} }
expect(document.location.href).toEqual(orgLocation); expect(document.location.href).toEqual(orgLocation);
})); });
it('should prevent IE for changing text content when setting attribute', function() {
// see issue #1949
element = jqLite('<a href="">hello@you</a>');
$compile(element);
element.attr('href', 'bye@me');
expect(element.text()).toBe('hello@you');
});
}); });