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

2 files changed, 29 insertions, 1 deletions

diff --git a/src/ng/directive/booleanAttrs.js b/src/ng/directive/booleanAttrs.js
index 5da98ef4..1468008c 100644
--- a/src/ng/directive/booleanAttrs.js
+++ b/src/ng/directive/booleanAttrs.js
@@ -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);
           }
         };
       }
diff --git a/test/ng/directive/booleanAttrsSpec.js b/test/ng/directive/booleanAttrsSpec.js
index f398441e..435ffcb9 100644
--- a/test/ng/directive/booleanAttrsSpec.js
+++ b/test/ng/directive/booleanAttrsSpec.js
@@ -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);
+    }));
+  }
 });