feat(ngSrcset): add new ngSrcset directive

In line with ngSrc and ngHref, this new directive ensures that the
`srcset` HTML5 attribute does not include a pre-interpolated string.
Without it the browser will fetch from the URL with the literal text
`{{hash}}` until AngularJS replaces the expression inside `{{hash}}`.

Closes #2601

2 files changed, 33 insertions, 1 deletions

diff --git a/test/ng/directive/booleanAttrsSpec.js b/test/ng/directive/booleanAttrsSpec.js
index 0ce6b555..aa48afff 100644
--- a/test/ng/directive/booleanAttrsSpec.js
+++ b/test/ng/directive/booleanAttrsSpec.js
@@ -88,7 +88,6 @@ 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);
 
@@ -126,6 +125,23 @@ describe('ngSrc', function() {
 });
 
 
+describe('ngSrcset', function() {
+  it('should interpolate the expression and bind to srcset', inject(function($compile, $rootScope) {
+    var element = $compile('<div ng-srcset="some/{{id}} 2x"></div>')($rootScope);
+
+    $rootScope.$digest();
+    expect(element.attr('srcset')).toEqual('some/ 2x');
+
+    $rootScope.$apply(function() {
+      $rootScope.id = 1;
+    });
+    expect(element.attr('srcset')).toEqual('some/1 2x');
+
+    dealoc(element);
+  }));
+});
+
+
 describe('ngHref', function() {
   var element;
 
diff --git a/test/ng/directive/ngSrcsetSpec.js b/test/ng/directive/ngSrcsetSpec.js
new file mode 100644
index 00000000..8fccb00a
--- /dev/null
+++ b/test/ng/directive/ngSrcsetSpec.js
@@ -0,0 +1,16 @@
+'use strict';
+
+describe('ngSrcset', function() {
+  var element;
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
+  it('should not result empty string in img srcset', inject(function($rootScope, $compile) {
+    $rootScope.image = {};
+    element = $compile('<img ng-srcset="{{image.url}} 2x">')($rootScope);
+    $rootScope.$digest();
+    expect(element.attr('srcset')).toEqual(' 2x');
+  }));
+});