The ngTransclude Directive

Author: teropa

src/angular_public.js

@@ -13,4 +13,5 @@ function publishExternalAPI() {
   ngModule.provider('$compile', $CompileProvider);
   ngModule.provider('$controller', $ControllerProvider);
   ngModule.directive('ngController', ngControllerDirective);
+  ngModule.directive('ngTransclude', ngTranscludeDirective);
 }

src/directives/ng_transclude.js

@@ -0,0 +1,14 @@
+var ngTranscludeDirective = function() {
+  'use strict';
+
+  return {
+    restrict: 'EAC',
+    link: function(scope, element, attrs, ctrl, transclude) {
+      transclude(function(clone) {
+        element.empty();
+        element.append(clone);
+      });
+    }
+  };
+
+};

test/directives/ng_transclude_spec.js

@@ -0,0 +1,63 @@
+describe('ngTransclude', function() {
+
+  beforeEach(function() {
+    delete window.angular;
+    publishExternalAPI();
+  });
+
+  function createInjectorWithTranscluderTemplate(template) {
+    return createInjector(['ng', function($compileProvider) {
+      $compileProvider.directive('myTranscluder', function() {
+        return {
+          transclude: true,
+          template: template
+        };
+      });
+    }]);
+  }
+
+  it('transcludes the parent directive transclusion', function() {
+    var injector = createInjectorWithTranscluderTemplate(
+      '<div ng-transclude></div>'
+    );
+    injector.invoke(function($compile, $rootScope) {
+      var el = $('<div my-transcluder>Hello</div>');
+      $compile(el)($rootScope);
+      expect(el.find('> [ng-transclude]').html()).toEqual('Hello');
+    });
+  });
+
+  it('empties existing contents', function() {
+    var injector = createInjectorWithTranscluderTemplate(
+      '<div ng-transclude>Existing contents</div>'
+    );
+    injector.invoke(function($compile, $rootScope) {
+      var el = $('<div my-transcluder>Hello</div>');
+      $compile(el)($rootScope);
+      expect(el.find('> [ng-transclude]').html()).toEqual('Hello');
+    });
+  });
+
+  it('may be used as element', function() {
+    var injector = createInjectorWithTranscluderTemplate(
+      '<ng-transclude>Existing contents</ng-transclude>'
+    );
+    injector.invoke(function($compile, $rootScope) {
+      var el = $('<div my-transcluder>Hello</div>');
+      $compile(el)($rootScope);
+      expect(el.find('> ng-transclude').html()).toEqual('Hello');
+    });
+  });
+
+  it('may be used as class', function() {
+    var injector = createInjectorWithTranscluderTemplate(
+      '<div class="ng-transclude">Existing contents</div>'
+    );
+    injector.invoke(function($compile, $rootScope) {
+      var el = $('<div my-transcluder>Hello</div>');
+      $compile(el)($rootScope);
+      expect(el.find('> .ng-transclude').html()).toEqual('Hello');
+    });
+  });
+
+});