From a5aadcd3b61726d8fb1571b287562ba5158b6975 Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Sun, 6 Dec 2015 21:45:45 +0000
Subject: [PATCH] fix($compile): swap keys and values for transclude definition
 object

Closes #13439

BREAKING CHANGE:

The keys and values for the `transclude` map of the directive definition
have been swapped around to be more consistent with the other maps, such
as `scope` and `bindToController`.

Now the key is the slot name and the value is an element selector.
---
 src/ng/compile.js                | 12 +++++++-----
 src/ng/directive/ngTransclude.js |  6 +++---
 test/ng/compileSpec.js           | 16 +++++++++++-----
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/ng/compile.js b/src/ng/compile.js
index 2006f1e4d2d8..43a48bc52cc2 100644
--- a/src/ng/compile.js
+++ b/src/ng/compile.js
@@ -480,11 +480,13 @@
  *
  * **Mult-slot transclusion** is declared by providing an object for the `transclude` property.
  *
- * This object is a map where the keys are the name of the slot to fill and the value is the element selector
- * used to match the HTML to the slot. Only element names are supported for matching. If the element selector
- * is prefixed with a `?` then that slot is optional.
+ * This object is a map where the keys are the name of the slot to fill and the value is an element selector
+ * used to match the HTML to the slot. The element selector can be in normalized camelCase form and will match
+ * elements using any of the standard variants of the camelCase form.
  *
- * For example, the transclude object `{ slotA: '?my-custom-element' }` maps `<my-custom-element>` elements to
+ * If the element selector is prefixed with a `?` then that slot is optional.
+ *
+ * For example, the transclude object `{ slotA: '?myCustomElement' }` maps `<my-custom-element>` elements to
  * the `slotA` slot, which can be accessed via the `$transclude` function or via the {@link ngTransclude} directive.
  *
  * Slots that are not marked as optional (`?`) will trigger a compile time error if there are no matching elements
@@ -1910,7 +1912,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
 
               // Add the matching elements into their slot
               forEach($compileNode.contents(), function(node) {
-                var slotName = slotMap[nodeName_(node)];
+                var slotName = slotMap[directiveNormalize(nodeName_(node))];
                 if (slotName) {
                   filledSlots[slotName] = true;
                   slots[slotName] = slots[slotName] || [];
diff --git a/src/ng/directive/ngTransclude.js b/src/ng/directive/ngTransclude.js
index 92b7720896b8..523fd7281e6d 100644
--- a/src/ng/directive/ngTransclude.js
+++ b/src/ng/directive/ngTransclude.js
@@ -126,9 +126,9 @@
  *        return {
  *          restrict: 'E',
  *          transclude: {
- *            'title': '?pane-title',
- *            'body': 'pane-body',
- *            'footer': '?pane-footer'
+ *            'title': '?paneTitle',
+ *            'body': 'paneBody',
+ *            'footer': '?paneFooter'
  *          },
  *          template: '<div style="border: 1px solid black;">' +
  *                      '<div class="title" ng-transclude="title">Fallback Title</div>' +
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
index e742cfb74789..234357b9f408 100755
--- a/test/ng/compileSpec.js
+++ b/test/ng/compileSpec.js
@@ -7941,27 +7941,33 @@ describe('$compile', function() {
     });
 
 
-    it('should not normalize the element name', function() {
+    it('should match the normalized form of the element name', function() {
       module(function() {
         directive('foo', function() {
           return {
             restrict: 'E',
             scope: {},
             transclude: {
-              fooBarSlot: 'foo-bar'
+              fooBarSlot: 'fooBar',
+              mooKarSlot: 'mooKar'
             },
             template:
-              '<div class="other" ng-transclude="fooBarSlot"></div>'
+              '<div class="a" ng-transclude="fooBarSlot"></div>' +
+              '<div class="b" ng-transclude="mooKarSlot"></div>'
           };
         });
       });
       inject(function($rootScope, $compile) {
         element = $compile(
           '<foo>' +
-            '<foo-bar>baz</foo-bar>' +
+            '<foo-bar>bar1</foo-bar>' +
+            '<foo:bar>bar2</foo:bar>' +
+            '<moo-kar>baz1</moo-kar>' +
+            '<data-moo-kar>baz2</data-moo-kar>' +
           '</foo>')($rootScope);
         $rootScope.$apply();
-        expect(element.text()).toEqual('baz');
+        expect(element.children().eq(0).text()).toEqual('bar1bar2');
+        expect(element.children().eq(1).text()).toEqual('baz1baz2');
       });
     });