diff --git a/src/ng/directive/booleanAttrs.js b/src/ng/directive/booleanAttrs.js index 7e0e3a4205ee..8f7399a60af2 100644 --- a/src/ng/directive/booleanAttrs.js +++ b/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: + *
+ * 
+ * 
+ * + * The correct way to write it: + *
+ * 
+ * 
+ * + * @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 { diff --git a/test/ng/directive/booleanAttrsSpec.js b/test/ng/directive/booleanAttrsSpec.js index 0ce6b555108e..aa48afffdb85 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('
')($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('
')($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 000000000000..8fccb00ae906 --- /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('')($rootScope); + $rootScope.$digest(); + expect(element.attr('srcset')).toEqual(' 2x'); + })); +});