diff --git a/src/ng/directive/booleanAttrs.js b/src/ng/directive/booleanAttrs.js index 1cd6d10a67c8..f3fb851fc670 100644 --- a/src/ng/directive/booleanAttrs.js +++ b/src/ng/directive/booleanAttrs.js @@ -108,6 +108,31 @@ * @param {template} ngSrc any string which can contain `{{}}` markup. */ +/** + * @ngdoc directive + * @name ng.directive:ngPoster + * @restrict A + * + * @description + * Using Angular markup like `{{hash}}` in a `poster` 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 `ngPoster` directive solves this problem. + * + * The buggy way to write it: + *
+ * + *+ * + * The correct way to write it: + *
+ * + *+ * + * @element VIDEO + * @param {template} ngPoster any string which can contain `{{}}` markup. + */ + /** * @ngdoc directive * @name ng.directive:ngSrcset @@ -325,8 +350,8 @@ forEach(BOOLEAN_ATTR, function(propName, attrName) { }); -// ng-src, ng-srcset, ng-href are interpolated -forEach(['src', 'srcset', 'href'], function(attrName) { +// ng-src, ng-srcset, ng-href, ng-poster are interpolated +forEach(['src', 'srcset', 'href', 'poster'], 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 83bc75e55188..854c9362c52b 100644 --- a/test/ng/directive/booleanAttrsSpec.js +++ b/test/ng/directive/booleanAttrsSpec.js @@ -252,3 +252,22 @@ describe('ngHref', function() { expect(element.attr('href')).toEqual('http://server'); })); }); + +describe("ngPoster", function() { + var element; + + afterEach(function() { + dealoc(element); + }); + + it("should interpolate the expression and bind the poster", inject(function($rootScope, $compile){ + element = $compile('')($rootScope) + $rootScope.$digest(); + expect(element.attr('poster')).toEqual('some/'); + + $rootScope.$apply(function() { + $rootScope.poster_img = 1; + }); + expect(element.attr('poster')).toEqual('some/1'); + })); +});