AngularJS ngtransclude

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:

<element ng-transclude ="string"></element>

Parameter Values:

Parameter	Type	Description
ngTransclude \| ngTranscludeSlot	string	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:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
                    angular.min.js"></script>
    </head>
    <body> 
        <div ng-app="myApp">
        <h3>ng-transclude Directive in AngularJS</h3>
        <div pane>
            <h1>AngularJS</h1>
        </div>
    </div>
    <script>
            var app = angular.module( "myApp" , []);
            app.controller('pane', function($scope) {
                return {
                    transclude: true,
                    template: '<div>Welcome to wikitechy</div>
                <div ng-transclude></div>
                }
            });
        </script>
    </body>
</html>

ng-transclude Directive in AngularJS:

var app = angular.module( "myApp" , []);
app.controller('pane', function($scope) {
    return {
        transclude: true,
        template: '<div>Welcome to wikitechy</div>
    <div ng-transclude></div>
    }
});

The ng-transclude directive is used to insert the existing content in an AngularJS Application.

Code Explanation for ng-transclude Directive in AngularJS:

Code Explanation for AngularJS ngtransclude

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:

Sample Output for AngularJS ngtransclude

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.

PDF

AngularJS ngtransclude

Syntax for ng-transclude Directive in AngularJS:

Parameter Values:

Sample code for ng-transclude Directive in AngularJS:

ng-transclude Directive in AngularJS:

Code Explanation for ng-transclude Directive in AngularJS:

Sample Output for ng-transclude Directive in AngularJS:

Related Searches to angularjs ngtransclude directive

Wikitechy

Join our Community

Other Languages