feat(directive): ng:srcset

src/ng/directive/booleanAttrs.js

@@ -105,6 +105,31 @@
  * @param {template} ngSrc any string which can contain `{{}}` markup.
  */
 
+/**
+ * @ngdoc directive
+ * @name ng.directive:ngSrcset
+ * @restrict A
+ *
+ * @description
+ * Using Angular markup like `{{hash}}` in a `srcset` attribute doesn't
+ * work right: The browser will fetch from the URL with the literal
+ * text `{{hash}}` until Angular replaces the expression inside
+ * `{{hash}}`. The `ngSrcset` directive solves this problem.
+ *
+ * The buggy way to write it:
+ * <pre>
+ * <img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>
+ * </pre>
+ *
+ * The correct way to write it:
+ * <pre>
+ * <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>
+ * </pre>
+ *
+ * @element IMG
+ * @param {template} ngSrcset any string which can contain `{{}}` markup.
+ */
+
 /**
  * @ngdoc directive
  * @name ng.directive:ngDisabled
@@ -325,8 +350,8 @@ forEach(BOOLEAN_ATTR, function(propName, attrName) {
 });
 
 
-// ng-src, ng-href are interpolated
-forEach(['src', 'href'], function(attrName) {
+// ng-src, ng-srcset, ng-href are interpolated
+forEach(['src', 'srcset', 'href'], function(attrName) {
  var normalized = directiveNormalize('ng-' + attrName);
  ngAttributeAliasDirectives[normalized] = function() {
  return {

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;
 

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');
+ }));
+});