The ng-transclude directive in AngularJS used to define a point to insert the transcluded elements.
Whenever the transcluded content is empty the existing content is left together.
If the transcluded content is not empty, any existing content of this element will be removed before the transcluded content is inserted.
This directive executes at priority level 0
Syntax for ng-transclude Directive in AngularJS:
ngTransclude | ngTranscludeSlot
Denotes the name of the slot to insert at this point. If this insert point is empty or its value is the same as the name of the attribute then the default slot is used.
Sample code for ng-transclude Directive in AngularJS:
ng-transclude Directive in AngularJS:
The ng-transclude directive is used to insert the existing content in an AngularJS Application.
Code Explanation for ng-transclude Directive in AngularJS:
The ng-app specifies the root element (<myApp>) to define AngularJS application.
To invoke a custom directive(pane) which is given as the <div> tag. (here custom directive name is mentioned for ‘pane’).
Here create an custom directive (app.directive) function and the directive name is given as “pane”.
The transclude value is given as true. If the transclude value true means it generate the existing content (Like AngularJS) otherwise transclude value is false, then the output displays the content of “welcome to wikitechy”.
The template is used for define a new content “welcome to wikitechy” in an AngularJS application.
ng-transclude directive is used to include the existing content “AngularJS” .
Sample Output for ng-transclude Directive in AngularJS:
The content welcome to wikitechy is displayed in the output using the custom directive(pane).
The content AngularJS is displayed in the output using the ng-transclude directive.
Related Searches to angularjs ngtransclude directive
ng-transclude-slotng-transclude scopeng-transclude replaceillegal use of ngtransclude directive in the template!ng-transclude componenttransclude meaningangular multiple transcludeangular transclude functiontransclude angularjs directiveangularjs tutorials
World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.