fix($compile): swap keys and values for transclude definition object

petebacondarwin · petebacondarwin · commit 96dd940d80ae · 2015-12-07T21:57:55.000Z
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.
diff --git 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/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');
       });
     });
 
