AngularJS ng-transclude Directive

by Online Tutorials Library July 22, 2022

AngularJS ng-transclude Directive

The AngularJS ng-transclude directive is used to mark the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.

The ng-transclude directive facilitates AngularJS to capture everything that is put inside the directive in the markup and use it somewhere in the directive’s template.

Syntax:

Parameter explanation:

ng-transclude/ng-transclude-slot: It specifies the name of the slot to insert at this point.

Let’s take an example to demonstrate the usage of ng-transclude directive.

See this example:

   <!doctype html>  <html lang=”en”>  <head>    <meta charset=”UTF-8″>    <script src=”../wp-content/static///ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js”></script>    </head>  <body ng-app=”transcludeExample”>    <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 = ‘TutorAspire’;      $scope.text = ‘TutorAspire is the best tutorial website and a solution of all technology. ‘;    }]);  </script>  <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}}</span></pane>  </div>  </body>  </html>  

Test it Now

Next TopicAngularJS ng-value Directive

AngularJS ng-transclude Directive

AngularJS ng-transclude Directive

XML Serialization and Deserialization with Jackson

Backbone.js collection.sync()

You may also like