feat($compile): multiple transclusion via named slots

Author: petebacondarwin

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 for directives such as `ngTransclude`
+      var boundSlots = boundTranscludeFn.$$slots = createMap();
+      for (var slotName in transcludeFn.$$slots) {
+        boundSlots[slotName] = createBoundTranscludeFn(scope, transcludeFn.$$slots[slotName], previousBoundTranscludeFn);
+      }
+
       return boundTranscludeFn;
     }
 
@@ -1826,6 +1833,52 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
                                           // on the same element more than once.
                                           nonTlbTranscludeDirective: nonTlbTranscludeDirective
                                         });
+          } else if (isObject(directiveValue)) {
+
+            // We have multiple transclusion zones - match them and collect them up into slots
+            $template = [];
+            var slots = createMap();
+            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 will contain true for all slots that are either
+              // optional or have been filled
+              filledSlots[slotName] = optional;
+            });
+
+
+            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);
+              }
+            });
+
+            // Compile each slot into a transclusion function and attach them to the default transclusion function
+            childTranscludeFn = compilationGenerator(mightHaveMultipleTransclusionError, $template, transcludeFn);
+            forEach(Object.keys(slots), function(slotName) {
+              slots[slotName] = compilationGenerator(mightHaveMultipleTransclusionError, slots[slotName], transcludeFn);
+            });
+            childTranscludeFn.$$slots = slots;
+            $compileNode.empty(); // clear contents
+
           } else {
             $template = jqLite(jqLiteClone(compileNode)).contents();
             $compileNode.empty(); // clear contents

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,86 @@
      </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);
-    });
+    var slotName = $attrs.ngTransclude || $attrs.ngTranscludeSlot;
+    if (slotName) {
+      $transclude = $transclude.$$boundTransclude.$$slots[slotName];
+      if ($transclude) {
+        $transclude(undefined, ngTranscludeCloneAttachFn);
+      } else {
+        throw ngTranscludeMinErr('orphan',
+         'Illegal use of ngTransclude directive in the template! ' +
+         'No parent directive that requires a transclusion with slot name "{0}". ' +
+         'Element: {1}',
+         slotName, startingTag($element));
+      }
+    } else {
+      $transclude(ngTranscludeCloneAttachFn);
+    }
   }
 });
+