CODEWITHSUNDEEP
javascriptangularjsdirective
Deadpool
Deadpool

Reputation: 8240

transclude usage in simple Directive Example

In the following simple example I am printing the name model from controller by directive on the view. The example is running fine, but what is the use of transclude I cannot understand. Can someone explain its usage? 

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
<people></people>

<script>
//module declaration
var app = angular.module("myApp",[]);
//controller declaration
app.controller('myCtrl',function($scope){
    $scope.name = "Peter";
});
//directives declaration
app.directive('people',function(){
    return{
        restric: 'E',
        template: '<div>{{name}}</div>',
        transclude: true
    }
});

</script> 
</body> 
</html>

Upvotes: 3

Views: 76

Answers (3)

Ozrix
Ozrix

Reputation: 3515

Essentially, these are wrappers around any arbitrary content. Supposing I have an accordion directive that shows or hides any content that you use it with with an animation. 

    app.directive('akordion', [function() {
        return {
            restrict:   'A',
            replace:    true,
            transclude: true,
            template:   '<div class="accordion-wrapper">'
                          +'<div class="transcluded" ng-transclude></div>'
                        +'</div>',
            link: function(scope, elem, attrs) {
                scope.$watch(attrs.show, function(newVal){
                    toggle(newVal);
                });

                function toggle(show) {
                    var h = (show) ? 0 : '600px';
                    $(elem).css({ maxHeight: h });
                }
            }
        }
    }]);

You'd use it like this:

<div akordion="" id="league-admin">
      <div>
           foo
      </div>
      <my-directive></my-directive>
</div>

And the result (generated HTML) is:

<div class="accordion-wrapper" id="league-admin">
    <div class="transcluded">
        <div>
            foo
        </div>
        <div id="my-directive">...</div>
    </div>
</div>

The point is that by calling the akordion="", you take whatever is inside it and put it in the template (<div class="transcluded" ng-transclude>). In other words, the akordion directive wraps over (transcludes) the content you use it on.

Another example would be modal windows. You don't want to repeat the code that defines the modal each time you want to use it, so you define it once, and use transclusion to put any content into it. Check out modal in Bootstrap UI.

Upvotes: 2

PeterS
PeterS

Reputation: 2954

Your code doesn't really demonstrate what transclude does: Look at this plunk and change the true/false value:

Plunk

You will notice the effect now hopefully. The source from plunkr, with a couple of modifications.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body ng-app="myApp" ng-controller="myCtrl"> 
<people>HI there</people>

<script>
//module declaration
var app = angular.module("myApp",[]);
//controller declaration
app.controller('myCtrl',function($scope){
    $scope.name = "Peter";
});
//directives declaration
app.directive('people',function(){
    return{
        restric: 'E',
        template: '<div><ng-transclude></ng-transclude>: {{name}}</div>',
        transclude: false
    }
});

</script> 
</body> 

</html>

So when it is true, you will see that the contents are transcluded,

So it says HI There: Peter

When False, it removes the HI There, but keeps the name and my colon:

: Peter

Upvotes: 2

S Vinesh
S Vinesh

Reputation: 539

Basically If you have some content inside your directive it will be automatically replaced by the directive content

For Example, if you have<people>Test transclude</people> The Test transclude string will be automatically replace by angular when it process the directive. But what if you want 'Test transclude ' also to be displayed ? Here is where transclude come in to action.

Consider the following

app.directive('people',function(){
return{
    restric: 'E',
    template: '<div><div ng-transclude></div>{{name}}</div>',
    transclude: true
}

});

Now the string 'Test transclude' will be also displayed inside tag

And this is the plunker link Plunk

Upvotes: 1

Related Questions