AngularJS: API: ng/directive/ngTransclude


ngTransclude

  1. - directive in module ng

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 element: (This directive can be used as custom element, but be aware of IE restrictions).
    <ng-transclude>
    ...
    </ng-transclude>
  • as attribute:
    <ANY>
    ...
    </ANY>
  • as CSS class:
    <ANY class=""> ... </ANY>

Example

index.html
<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>' +
                    '<ng-transclude></ng-transclude>' +
                  '</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>
protractor.js
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');});