feat(ngTranscludeSelect): add ng-transclude-select directive

The ng-translude-select directive allows users to transclude multiple templates into their directive.

angularFiles.js

@@ -73,6 +73,7 @@ var angularFiles = {
     'src/ng/directive/ngStyle.js',
     'src/ng/directive/ngSwitch.js',
     'src/ng/directive/ngTransclude.js',
+    'src/ng/directive/ngTranscludeSelect.js',
     'src/ng/directive/script.js',
     'src/ng/directive/select.js',
     'src/ng/directive/style.js',

src/AngularPublic.js

@@ -39,6 +39,7 @@
   ngSwitchDefaultDirective,
   ngOptionsDirective,
   ngTranscludeDirective,
+  ngTranscludeSelectDirective,
   ngModelDirective,
   ngListDirective,
   ngChangeDirective,
@@ -197,6 +198,7 @@ function publishExternalAPI(angular) {
             ngSwitchDefault: ngSwitchDefaultDirective,
             ngOptions: ngOptionsDirective,
             ngTransclude: ngTranscludeDirective,
+            ngTranscludeSelect: ngTranscludeSelectDirective,
             ngModel: ngModelDirective,
             ngList: ngListDirective,
             ngChange: ngChangeDirective,

src/ng/directive/ngTranscludeSelect.js

@@ -0,0 +1,49 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name ngTranscludeSelect
+ * @restrict EAC
+ *
+ * @description
+ *
+ * @element ANY
+ *
+ */
+var ngTranscludeSelectDirective = ngDirective({
+  restrict: 'EAC',
+  link: function($scope, $element, $attrs, controller, $transclude) {
+    checkTranscludeOption();
+    $transclude(transcludeSelection);
+
+    function transcludeSelection(clone) {
+      var selector = $attrs.ngTranscludeSelect;
+      var selectedElements = getSelectedElements(clone, selector);
+      if (selectedElements.length) $element.append(selectedElements);
+    }
+
+    function getSelectedElements(clone, selector) {
+      var wrapper = wrapClone(clone);
+      var selectedElements = wrapper[0].querySelectorAll(selector);
+      wrapper.remove();
+      return selectedElements;
+    }
+
+    function wrapClone(clone) {
+      var wrapper = jqLite("<div>");
+      wrapper.append(clone);
+      return wrapper;
+    }
+
+    function checkTranscludeOption() {
+      if (!$transclude) {
+        throw minErr('ngTransclude')('orphan',
+         'Illegal use of ngTranscludeSelect directive in the template! ' +
+         'No parent directive that requires a transclusion found. ' +
+         'Element: {0}',
+         startingTag($element));
+      }
+    }
+  }
+});
+

test/ng/directive/ngTranscludeSelectSpec.js

@@ -0,0 +1,37 @@
+'use strict';
+
+
+describe('ngTranscludeSelect', function() {
+  it('should append matching clone elements to ng-transclude-select elements', function() {
+    module(function($compileProvider) {
+      $compileProvider.directive('transclude', valueFn({
+        transclude: true,
+        scope: {},
+        template: '<div ng-transclude-select="[top]"></div><div ng-transclude-select="[bottom]"></div>'
+      }));
+    });
+    inject(function($compile, $rootScope) {
+      var topTarget, bottomTarget;
+      var element = $compile(
+        '<div transclude><div bottom>In bottom.</div><div top>In top.</div></div></div>'
+      )($rootScope);
+      topTarget = jqLite(element[0].querySelector('[ng-transclude-select="[top]"]'));
+      bottomTarget = jqLite(element[0].querySelector('[ng-transclude-select="[bottom]"]'));
+      expect(topTarget.text()).toEqual('In top.');
+      expect(bottomTarget.text()).toEqual('In bottom.');
+    });
+  });
+  it('should throw on an ng-transclude-select element inside no transclusion directive', function() {
+    inject(function($rootScope, $compile) {
+      try {
+        $compile('<div><div ng-transclude-select="[top]"></div></div>')($rootScope);
+      } catch (e) {
+        expect(e.message).toMatch(new RegExp(
+            '^\\[ngTransclude:orphan\\] ' +
+                'Illegal use of ngTranscludeSelect directive in the template! ' +
+                'No parent directive that requires a transclusion found\\. ' +
+                'Element: <div ng-transclude-select.+'));
+      }
+    });
+  });
+});