AngularJS | ng-transclude Directive - GeeksforGeeks

10 May, 2019
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:
<!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>
Output:Example-2:
<!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>
Output:
Example-3:
<!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>
Output:
AngularJS-Directives
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Angular PrimeNG Dropdown Component
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?