Improve this doc View Source

Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.

Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.

## Directive Info

- This directive executes at priority level 0.

## Usage

- as attribute:

      <ANY>
      ...
      </ANY>

- as CSS class:

      <ANY class=""> ... </ANY>

## Example

Edit in Plunker

    <script>
      angular.module('transcludeExample', [])
       .directive('pane', function(){
          return {
            restrict: 'E',
            transclude: true,
            scope: { title:'@' },
            template: '<div style="border: 1px solid black;">' +
                        '<div style="background-color: gray">{{title}}</div>' +
                        '<div ng-transclude></div>' +
                      '</div>'
          };
      })
      .controller('ExampleController', ['$scope', function($scope) {
        $scope.title = 'Lorem Ipsum';
        $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
      }]);
    </script>
    <div ng-controller="ExampleController">
      <input ng-model="title"><br>
      <textarea ng-model="text"></textarea> <br/>
      <pane title="{{title}}">{{text}}</pane>
    </div>

    it('should have transcluded', 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');
    });