fix(ngSrc,ngHref): binding should set element prop as well as attr

IE9 ignores setAttribute('src', val) calls on img if "ng:src" attribute
is present. It only fetches the image if element property is updated as well.

Closes #935
This commit is contained in:
Igor Minar 2012-05-06 16:30:24 -07:00
parent 49dfdf8f02
commit b24cc63bcb
2 changed files with 29 additions and 1 deletions

View file

@ -310,10 +310,16 @@ forEach(['src', 'href'], function(attrName) {
attr.$$observers[attrName] = [];
attr.$observe(normalized, function(value) {
attr.$set(attrName, 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
if (msie) element.prop(attrName, value);
});
} else {
// value present means that no interpolation, so copy to native attribute.
attr.$set(attrName, value);
element.prop(attrName, value);
}
};
}

View file

@ -80,7 +80,8 @@ describe('boolean attr directives', function() {
describe('ngSrc', function() {
it('should interpolate the expression and bind to src', inject(function($compile, $rootScope) {
var element = $compile('<div ng-src="some/{{id}}"></div>')($rootScope)
var element = $compile('<div ng-src="some/{{id}}"></div>')($rootScope);
$rootScope.$digest();
expect(element.attr('src')).toEqual('some/');
@ -91,6 +92,27 @@ describe('ngSrc', function() {
dealoc(element);
}));
if (msie) {
it('should update the element property as well as the attribute', inject(
function($compile, $rootScope) {
// 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
var element = $compile('<div ng-src="some/{{id}}"></div>')($rootScope);
$rootScope.$digest();
expect(element.prop('src')).toEqual('some/');
$rootScope.$apply(function() {
$rootScope.id = 1;
});
expect(element.prop('src')).toEqual('some/1');
dealoc(element);
}));
}
});