CODEWITHSUNDEEP
angularjsangularjs-directive
Rahul Shivsharan
Rahul Shivsharan

Reputation: 2559

ng-transclude don't work as insertion point in my template

I am new to angular directive module.

if I use transclude in my directive definition, and set it to true, I can actually add an extra html template in the directive template at compile time.

Please follow the code below,

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Chapter-01 example 15</title>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\js\bootstrap.js"></script>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap-theme.css"></link>
    <script type="text/javaScript">
        angular.module("MyApp",[]);
        (function(){
            angular.module("MyApp").controller("MyCtrl",MyCtrl);
            angular.module("MyApp").directive("simpleDirective",simpleDirective);

            function MyCtrl($scope){
                $scope.myCtrlObj = new Object();                    
                $scope.myCtrlObj.localName = "John Wayne";
                $scope.myCtrlObj.petName = "Johny";
            };

            function simpleDirective(){
                var templatStr = "<div class='alert alert-warning'>"+
                                        "<h3>This is Toggle Example....</h3>" +
                                        "<h2><strong>{{myCtrlObj.localName}}</strong></h2>"+                                            
                                  "</div>";
                return {
                    restrict : "EA",
                    template : function(tElem,tAttr){
                        return templatStr;
                    },  
                    replace : true,
                    transclude : true ,
                    link : function(scope,elem,attr,controller,transcludeFn){                           

                        scope.myCtrlObj.localName = "Leonardo Di Caprio";
                        scope.myCtrlObj.petName = "Leo";

                        scope.showMe = function(){
                            if (elem.hasClass("alert-success") === true){
                                elem.removeClass("alert-success");
                                elem.addClass("alert-warning");
                            }else{
                                elem.removeClass("alert-warning");
                                elem.addClass("alert-success");
                            }                               
                        };

                        var clonedElement = transcludeFn(function(clone){                               
                            return clone;
                        });

                        elem.append(clonedElement); 
                    }                       
                }
            }
        })();
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyCtrl" class="container">
        <div class="page-header">
            <h3>This is Directive Practise</h3>
        </div>
        <div class="row">
            <div class="col-md-4">                  
                <input type='button' class='btn btn-primary' value="Click-Me" ng-click='showMe()' />                                                                        
            </div>          
        </div>
        <div class="row" style="margin-top:2%">
            <div class="col-md-4">
                <div simple-directive>
                    <span>His real Name is : <b>{{myCtrlObj.localName}}</b><span>
                    <br/>
                    <span>His pet name is : <b>{{myCtrlObj.petName}}</b></span>
                </div>
            </div>
        </div>  
    </div>
</body>

It works fine, I am pasting the link of working example with above code Working example of above code

Now I do some changes in the above code like,

changing the link function as follows, 

                   link : function(scope,elem,attr,controller){                         

                        scope.myCtrlObj.localName = "Leonardo Di Caprio";
                        scope.myCtrlObj.petName = "Leo";

                        scope.showMe = function(){
                            if (elem.hasClass("alert-success") === true){
                                elem.removeClass("alert-success");
                                elem.addClass("alert-warning");
                            }else{
                                elem.removeClass("alert-warning");
                                elem.addClass("alert-success");
                            }                               
                        };
                    }

In the above code I have removed the appending of clone returned from tranclude function to element.

And adding ng-transclude to template as follows,

                         var templatStr = "<div class='alert alert-warning'>"+
                                        "<h3>This is Toggle Example....</h3>" +
                                        "<h2><strong>{{myCtrlObj.localName}}</strong></h2>"+
                                        "<ng-transclude></ng-transclude>" + 
                                  "</div>";

by doing all the above changes mentioned, the html template is not appended.

Please click on the link for the ng-transclude example

What I have read is if we use ng-transclude in the template, we don't need to write a transclude function in link,

If yes, why my second example is not working.

Upvotes: 0

Views: 147

Answers (1)

Ali
Ali

Reputation: 1085

You need to change the following

<ng-transclude></ng-transclude>

To

<div ng-transclude></div>

And it going to work. The reason is the version of angular you are using doesn't support using ng-transclude as an element.

Upvotes: 0

Related Questions