From 0783345de21fce44cb24d4715fc29309585ddca5 Mon Sep 17 00:00:00 2001
From: mfo <fourcade.m@gmail.com>
Date: Mon, 14 Oct 2013 14:41:49 +0200
Subject: [PATCH] feat(directive): add ng:poster for <video>

New directive for proper poster video attr (works like ng-src).
Added doc & spec.
---
 src/ng/directive/booleanAttrs.js      | 29 +++++++++++++++++++++++++--
 test/ng/directive/booleanAttrsSpec.js | 19 ++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)

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:
+ * <pre>
+ * <video poster="http://www.gravatar.com/avatar/{{hash}}"></video>
+ * </pre>
+ *
+ * The correct way to write it:
+ * <pre>
+ * <video ng-poster="http://www.gravatar.com/avatar/{{hash}}"></video>
+ * </pre>
+ *
+ * @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('<video ng-poster="some/{{poster_img}}"></video>')($rootScope)
+    $rootScope.$digest();
+    expect(element.attr('poster')).toEqual('some/');
+
+    $rootScope.$apply(function() {
+      $rootScope.poster_img = 1;
+    });
+    expect(element.attr('poster')).toEqual('some/1');
+  }));
+});