From d70554f8810aaee0c79cda5d853706573d52cf8b Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Sun, 27 Sep 2015 23:15:46 +0100
Subject: [PATCH] feat($compile): multiple transclusion via named slots

---
 src/ng/compile.js                |  68 +++++++-
 src/ng/directive/ngTransclude.js |  73 +++++++-
 test/ng/compileSpec.js           | 289 +++++++++++++++++++++++++++++++
 3 files changed, 421 insertions(+), 9 deletions(-)

diff --git a/src/ng/compile.js b/src/ng/compile.js
index 393ab6375a27..58308991f334 100644
--- a/src/ng/compile.js
+++ b/src/ng/compile.js
@@ -1486,6 +1486,13 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
         });
       };
 
+      // We need  to attach the transclusion slots onto the `boundTranscludeFn`
+      // so that they are available inside the `controllersBoundTransclude` function
+      var boundSlots = boundTranscludeFn.$$slots = createMap();
+      for (var slotName in transcludeFn.$$slots) {
+        boundSlots[slotName] = createBoundTranscludeFn(scope, transcludeFn.$$slots[slotName], previousBoundTranscludeFn);
+      }
+
       return boundTranscludeFn;
     }
 
@@ -1827,9 +1834,56 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
                                           nonTlbTranscludeDirective: nonTlbTranscludeDirective
                                         });
           } else {
+
+            var slots = createMap();
             $template = jqLite(jqLiteClone(compileNode)).contents();
+
+            if (isObject(directiveValue)) {
+
+              // We have transclusion slots - collect them up and compile them and store their
+              // transclusion functions
+              $template = [];
+              var slotNames = createMap();
+              var filledSlots = createMap();
+
+              // Parse the slot names: if they start with a ? then they are optional
+              forEach(directiveValue, function(slotName, key) {
+                var optional = (slotName.charAt(0) === '?');
+                slotName = optional ? slotName.substring(1) : slotName;
+                slotNames[key] = slotName;
+                slots[slotName] = [];
+                // filledSlots contains `true` for all slots that are either optional or have been
+                // filled. This is used to check that we have not missed any required slots
+                filledSlots[slotName] = optional;
+              });
+
+              // Add the matching elements into their slot
+              forEach($compileNode.children(), function(node) {
+                var slotName = slotNames[directiveNormalize(nodeName_(node))];
+                var slot = $template;
+                if (slotName) {
+                  filledSlots[slotName] = true;
+                  slots[slotName].push(node);
+                } else {
+                  $template.push(node);
+                }
+              });
+
+              // Check for required slots that were not filled
+              forEach(filledSlots, function(filled, slotName) {
+                if (!filled) {
+                  throw $compileMinErr('reqslot', 'Required transclusion slot `{0}` was not filled.', slotName);
+                }
+              });
+
+              forEach(Object.keys(slots), function(slotName) {
+                slots[slotName] = compilationGenerator(mightHaveMultipleTransclusionError, slots[slotName], transcludeFn);
+              });
+            }
+
             $compileNode.empty(); // clear contents
             childTranscludeFn = compilationGenerator(mightHaveMultipleTransclusionError, $template, transcludeFn);
+            childTranscludeFn.$$slots = slots;
           }
         }
 
@@ -2134,11 +2188,11 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
 
         // This is the function that is injected as `$transclude`.
         // Note: all arguments are optional!
-        function controllersBoundTransclude(scope, cloneAttachFn, futureParentElement) {
+        function controllersBoundTransclude(scope, cloneAttachFn, futureParentElement, slotName) {
           var transcludeControllers;
-
           // No scope passed in:
           if (!isScope(scope)) {
+            slotName = futureParentElement;
             futureParentElement = cloneAttachFn;
             cloneAttachFn = scope;
             scope = undefined;
@@ -2150,6 +2204,16 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
           if (!futureParentElement) {
             futureParentElement = hasElementTranscludeDirective ? $element.parent() : $element;
           }
+          if (slotName) {
+            var slotTranscludeFn = boundTranscludeFn.$$slots[slotName];
+            if (!slotTranscludeFn) {
+              throw $compileMinErr('noslot',
+               'No parent directive that requires a transclusion with slot name "{0}". ' +
+               'Element: {1}',
+               slotName, startingTag($element));
+            }
+            return slotTranscludeFn(scope, cloneAttachFn, transcludeControllers, futureParentElement, scopeToChild);
+          }
           return boundTranscludeFn(scope, cloneAttachFn, transcludeControllers, futureParentElement, scopeToChild);
         }
       }
diff --git a/src/ng/directive/ngTransclude.js b/src/ng/directive/ngTransclude.js
index 36201a69ab73..ec31eaf5fc23 100644
--- a/src/ng/directive/ngTransclude.js
+++ b/src/ng/directive/ngTransclude.js
@@ -8,12 +8,20 @@
  * @description
  * Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
  *
+ * You can specify that you want to insert a named transclusion slot, instead of the default slot, by providing the slot name
+ * as the value of the `ng-transclude` or `ng-transclude-slot` attribute.
+ *
  * Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.
  *
  * @element ANY
  *
+ * @param {string} ngTransclude|ngTranscludeSlot the name of the slot to insert at this point. If this is not provided or empty then
+ *                                               the default slot is used.
+ *
  * @example
-   <example module="transcludeExample">
+ * ### Default transclusion
+ * This example demonstrates simple transclusion.
+   <example name="simpleTranscludeExample" module="transcludeExample">
      <file name="index.html">
        <script>
          angular.module('transcludeExample', [])
@@ -53,21 +61,72 @@
      </file>
    </example>
  *
- */
+ * @example
+ * ### Multi-slot transclusion
+   <example name="multiSlotTranscludeExample" module="multiSlotTranscludeExample">
+     <file name="index.html">
+      <div ng-controller="ExampleController">
+        <input ng-model="title" aria-label="title"> <br/>
+        <textarea ng-model="text" aria-label="text"></textarea> <br/>
+        <pane>
+          <pane-title><a ng-href="{{link}}">{{title}}</a></pane-title>
+          <pane-body><p>{{text}}</p></pane-body>
+        </pane>
+      </div>
+     </file>
+     <file name="app.js">
+      angular.module('multiSlotTranscludeExample', [])
+       .directive('pane', function(){
+          return {
+            restrict: 'E',
+            transclude: {
+              'paneTitle': '?title',
+              'paneBody': 'body'
+            },
+            template: '<div style="border: 1px solid black;">' +
+                        '<div ng-transclude="title" style="background-color: gray"></div>' +
+                        '<div ng-transclude="body"></div>' +
+                      '</div>'
+          };
+      })
+      .controller('ExampleController', ['$scope', function($scope) {
+        $scope.title = 'Lorem Ipsum';
+        $scope.link = "https://google.com";
+        $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
+      }]);
+     </file>
+     <file name="protractor.js" type="protractor">
+        it('should have transcluded the title and the body', function() {
+          var titleElement = element(by.model('title'));
+          titleElement.clear();
+          titleElement.sendKeys('TITLE');
+          var textElement = element(by.model('text'));
+          textElement.clear();
+          textElement.sendKeys('TEXT');
+          expect(element(by.binding('title')).getText()).toEqual('TITLE');
+          expect(element(by.binding('text')).getText()).toEqual('TEXT');
+        });
+     </file>
+   </example> */
+var ngTranscludeMinErr = minErr('ngTransclude');
 var ngTranscludeDirective = ngDirective({
   restrict: 'EAC',
   link: function($scope, $element, $attrs, controller, $transclude) {
+
+    function ngTranscludeCloneAttachFn(clone) {
+      $element.empty();
+      $element.append(clone);
+    }
+
     if (!$transclude) {
-      throw minErr('ngTransclude')('orphan',
+      throw ngTranscludeMinErr('orphan',
        'Illegal use of ngTransclude directive in the template! ' +
        'No parent directive that requires a transclusion found. ' +
        'Element: {0}',
        startingTag($element));
     }
 
-    $transclude(function(clone) {
-      $element.empty();
-      $element.append(clone);
-    });
+    $transclude(ngTranscludeCloneAttachFn, null, $attrs.ngTransclude || $attrs.ngTranscludeSlot);
   }
 });
+
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
index 767600571601..76cc889604c4 100755
--- a/test/ng/compileSpec.js
+++ b/test/ng/compileSpec.js
@@ -7265,6 +7265,295 @@ describe('$compile', function() {
   });
 
 
+  describe('multi-slot transclude', function() {
+    it('should only include elements without a matching transclusion element in default transclusion slot', function() {
+      module(function() {
+        directive('minionComponent', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              boss: 'bossSlot'
+            },
+            template:
+              '<div class="other" ng-transclude></div>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        element = $compile(
+          '<minion-component>' +
+            '<span>stuart</span>' +
+            '<span>bob</span>' +
+            '<boss>gru</boss>' +
+            '<span>kevin</span>' +
+          '</minion-component>')($rootScope);
+        $rootScope.$apply();
+        expect(element.text()).toEqual('stuartbobkevin');
+      });
+    });
+
+    it('should transclude elements to an `ng-transclude` with a matching transclusion slot name', function() {
+      module(function() {
+        directive('minionComponent', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              minion: 'minionSlot',
+              boss: 'bossSlot'
+            },
+            template:
+              '<div class="boss" ng-transclude="bossSlot"></div>' +
+              '<div class="minion" ng-transclude="minionSlot"></div>' +
+              '<div class="other" ng-transclude></div>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        element = $compile(
+          '<minion-component>' +
+            '<minion>stuart</minion>' +
+            '<span>dorothy</span>' +
+            '<boss>gru</boss>' +
+            '<minion>kevin</minion>' +
+          '</minion-component>')($rootScope);
+        $rootScope.$apply();
+        expect(element.children().eq(0).text()).toEqual('gru');
+        expect(element.children().eq(1).text()).toEqual('stuartkevin');
+        expect(element.children().eq(2).text()).toEqual('dorothy');
+      });
+    });
+
+
+    it('should use the `ng-transclude-slot` attribute if ng-transclude is used as an element', function() {
+      module(function() {
+        directive('minionComponent', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              minion: 'minionSlot',
+              boss: 'bossSlot'
+            },
+            template:
+              '<ng-transclude class="boss" ng-transclude-slot="bossSlot"></ng-transclude>' +
+              '<ng-transclude class="minion" ng-transclude-slot="minionSlot"></ng-transclude>' +
+              '<ng-transclude class="other"></ng-transclude>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        element = $compile(
+          '<minion-component>' +
+            '<minion>stuart</minion>' +
+            '<span>dorothy</span>' +
+            '<boss>gru</boss>' +
+            '<minion>kevin</minion>' +
+          '</minion-component>')($rootScope);
+        $rootScope.$apply();
+        expect(element.children().eq(0).text()).toEqual('gru');
+        expect(element.children().eq(1).text()).toEqual('stuartkevin');
+        expect(element.children().eq(2).text()).toEqual('dorothy');
+      });
+    });
+
+    it('should error if a required transclude slot is not filled', function() {
+      module(function() {
+        directive('minionComponent', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              minion: 'minionSlot',
+              boss: 'bossSlot'
+            },
+            template:
+              '<div class="boss" ng-transclude="bossSlot"></div>' +
+              '<div class="minion" ng-transclude="minionSlot"></div>' +
+              '<div class="other" ng-transclude></div>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        expect(function() {
+          element = $compile(
+            '<minion-component>' +
+              '<minion>stuart</minion>' +
+              '<span>dorothy</span>' +
+            '</minion-component>')($rootScope);
+        }).toThrowMinErr('$compile', 'reqslot', 'Required transclusion slot `bossSlot` was not filled.');
+      });
+    });
+
+
+    it('should not error if an optional transclude slot is not filled', function() {
+      module(function() {
+        directive('minionComponent', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              minion: 'minionSlot',
+              boss: '?bossSlot'
+            },
+            template:
+              '<div class="boss" ng-transclude="bossSlot"></div>' +
+              '<div class="minion" ng-transclude="minionSlot"></div>' +
+              '<div class="other" ng-transclude></div>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        element = $compile(
+          '<minion-component>' +
+            '<minion>stuart</minion>' +
+            '<span>dorothy</span>' +
+          '</minion-component>')($rootScope);
+        $rootScope.$apply();
+        expect(element.children().eq(1).text()).toEqual('stuart');
+        expect(element.children().eq(2).text()).toEqual('dorothy');
+      });
+    });
+
+
+    it('should error if we try to transclude a slot that was not declared by the directive', function() {
+      module(function() {
+        directive('minionComponent', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              minion: 'minionSlot'
+            },
+            template:
+              '<div class="boss" ng-transclude="bossSlot"></div>' +
+              '<div class="minion" ng-transclude="minionSlot"></div>' +
+              '<div class="other" ng-transclude></div>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        expect(function() {
+          element = $compile(
+            '<minion-component>' +
+              '<minion>stuart</minion>' +
+              '<span>dorothy</span>' +
+            '</minion-component>')($rootScope);
+        }).toThrowMinErr('$compile', 'noslot',
+          'No parent directive that requires a transclusion with slot name "bossSlot". ' +
+          'Element: <div class="boss" ng-transclude="bossSlot">');
+      });
+    });
+
+    it('should allow the slot name to equal the element name', function() {
+
+      module(function() {
+        directive('foo', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              bar: 'bar'
+            },
+            template:
+              '<div class="other" ng-transclude="bar"></div>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        element = $compile(
+          '<foo>' +
+            '<bar>baz</bar>' +
+          '</foo>')($rootScope);
+        $rootScope.$apply();
+        expect(element.text()).toEqual('baz');
+      });
+    });
+
+
+    it('should match against the normalized form of the element', function() {
+      module(function() {
+        directive('foo', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              fooBar: 'fooBarSlot'
+            },
+            template:
+              '<div class="other" ng-transclude="fooBarSlot"></div>'
+          };
+        });
+      });
+      inject(function($rootScope, $compile) {
+        element = $compile(
+          '<foo>' +
+            '<foo-bar>baz</foo-bar>' +
+          '</foo>')($rootScope);
+        $rootScope.$apply();
+        expect(element.text()).toEqual('baz');
+      });
+    });
+
+
+    it('should provide the elements marked with matching transclude elements as additional transclude functions on the $$slots property', function() {
+      var capturedTranscludeFn;
+      module(function() {
+        directive('minionComponent', function() {
+          return {
+            restrict: 'E',
+            scope: {},
+            transclude: {
+              minion: 'minionSlot',
+              boss: 'bossSlot'
+            },
+            template:
+              '<div class="boss" ng-transclude="bossSlot"></div>' +
+              '<div class="minion" ng-transclude="minionSlot"></div>' +
+              '<div class="other" ng-transclude></div>',
+            link: function(s, e, a, c, transcludeFn) {
+              capturedTranscludeFn = transcludeFn;
+            }
+          };
+        });
+      });
+      inject(function($rootScope, $compile, log) {
+        element = $compile(
+          '<minion-component>' +
+          '  <minion>stuart</minion>' +
+          '  <minion>bob</minion>' +
+          '  <span>dorothy</span>' +
+          '  <boss>gru</boss>' +
+          '</minion-component>')($rootScope);
+        $rootScope.$apply();
+
+        var minionTranscludeFn = capturedTranscludeFn.$$boundTransclude.$$slots['minionSlot'];
+        var minions = minionTranscludeFn();
+        expect(minions[0].outerHTML).toEqual('<minion class="ng-scope">stuart</minion>');
+        expect(minions[1].outerHTML).toEqual('<minion class="ng-scope">bob</minion>');
+
+        var scope = element.scope();
+
+        var minionScope = jqLite(minions[0]).scope();
+        expect(minionScope.$parent).toBe(scope);
+
+        var bossTranscludeFn = capturedTranscludeFn.$$boundTransclude.$$slots['bossSlot'];
+        var boss = bossTranscludeFn();
+        expect(boss[0].outerHTML).toEqual('<boss class="ng-scope">gru</boss>');
+
+        var bossScope = jqLite(boss[0]).scope();
+        expect(bossScope.$parent).toBe(scope);
+
+        expect(bossScope).not.toBe(minionScope);
+
+        dealoc(boss);
+        dealoc(minions);
+      });
+    });
+  });
+
+
   describe('img[src] sanitization', function() {
 
     it('should NOT require trusted values for img src', inject(function($rootScope, $compile, $sce) {