fix(img): non-empty string test for ngSrc

xrchen · mhevery · commit 78c35cacff4c · 2012-09-05T15:11:52.000-07:00
Current implementation of ngSrc may lead to empty src attribute when page is loading.

For example:

&lt;img ng-src="{{image.url}}"&gt;
can be temporarily rendered as

&lt;img src=""&gt;
before the image resource is loaded.

Some browser emits a request to the current page when seeing &lt;img src=""&gt; (Firefox13 and IE8 will, Chromium20 won't), which leads to performance problems.
diff --git a/src/ng/directive/booleanAttrs.js b/src/ng/directive/booleanAttrs.js
@@ -302,6 +302,9 @@ forEach(['src', 'href'], function(attrName) {
       priority: 99, // it needs to run after the attributes are interpolated
       link: function(scope, element, attr) {
         attr.$observe(normalized, function(value) {
+          if (!value)
+             return;
+
           attr.$set(attrName, value);
 
           // on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist
diff --git a/test/ng/directive/ngSrcSpec.js b/test/ng/directive/ngSrcSpec.js
@@ -0,0 +1,17 @@
+'use strict';
+
+describe('ngSrc', function() {
+  var element;
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+  it('should not result empty string in img src', inject(function($rootScope, $compile) {
+    $rootScope.image = {};
+    element = $compile('<img ng-src="{{image.url}}">')($rootScope);
+    $rootScope.$digest();
+    expect(element.attr('src')).not.toBe('');
+    expect(element.attr('src')).toBe(undefined);
+  }));
+});
