AngularJS | ng-transclude Directive

ng-transclude directive is used to mark the insertion point for transcluded DOM of nearest parent that uses transclusion. Use transclusion slot name as value of ng-transclude or ng-transclude-slot attribute.

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
  </script>
</head>
  
<body ng-app="transcludeDemo">
    <center>
      <script>
        angular.module('transcludeDemo', [])
          .directive('pane', function() {
             return {
                restrict: 'E',
                 transclude: true,
                 scope: {
                    title: '@'
                 },
                 template: 
               '<div style="border: 3px solid black;">' +             
               '<div style="background-color: limegreen">'+
               '{{title.toUpperCase();}}</div>' +  
                          '<ng-transclude></ng-transclude>' +
                            '</div>'
                    };
                })
                .controller(
          'ExampleController', ['$scope', function($scope) {
                    $scope.title = 'gfg';
           }]);
      </script>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div ng-controller="ExampleController">
            <input ng-model="title" aria-label="title">
            <br/>
            <pane title="{{title}}">
              <span>{{text}}</span></pane>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:

Example-2:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>
      simpleTranscludeExample
  </title>
  
    <script src=
"//code.angularjs.org/snapshot/angular.min.js">
  </script>
</head>
  
<body ng-app="transcludeDemo">
   <center>
      <script>
        angular.module('transcludeDemo', [])
          .directive('pane', function() {
            return {
              restrict: 'E',
              transclude: true,
              scope: {
                title: '@'
              },
              template:
       '<div style="border: 1px solid black;">' +
        '<div style="background-color: green">'+
              '{{title.toUpperCase();}}</div>' +
             '<ng-transclude></ng-transclude>' +
        '</div>'
            };
        })
                .controller(
          'ExampleController', ['$scope', function($scope) {
                    $scope.title = 'gfg';
                    $scope.text = 'geeksforgeeks';
                }]);
        </script>
        <h1 style="color:green">GeeksforGeeks</h1>
        <div ng-controller="ExampleController">
            <input ng-model="title" aria-label="title">
            <br/>
            <textarea ng-model="text" aria-label="text"></textarea>
            <br/>
            <pane title="{{title}}">
              <span>{{text.toUpperCase();}}</span></pane>
        </div>
    </center>
</body>
  
</html>

chevron_right


Output:

Example-3:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>ng-transclude</title>
  
    <script src=
"//code.angularjs.org/snapshot/angular.min.js">
  </script>
  
</head>
  
<body ng-app="FallbackContentDemo">
  <center>
    <script>
      angular.module('FallbackContentDemo', [])
         .directive('myButton', function() {
             return {
               restrict: 'E',
               transclude: true,
                scope: true,
                template: 
               '<button style="cursor: wait;">' +
                              '<ng-transclude>' +
       '<b style="color: green;">Click Me!</b>' +
                            '</ng-transclude>' +
                            '</button>'
                    };
                });
        </script>
        <h1 style="color:green">GeeksforGeeks</h1>
        <!-- fallback button content -->
        <my-button id="fallback"></my-button>
        <!-- modified button content -->
        <br>
        <my-button id="modified">
            <i style="color: blue;">Click Me!</i>
        </my-button>
    </center>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.