ng-transclude not working in template AngularJS

Question

Sorry, if something stupid I am missing here, but I really tried various combos to make this code work, but no luck.

I am learning directive in AngularjS from Recipes with AngularJS but stuck at this code -

https://github.com/fdietz/recipes-with-angular-js-examples/tree/master/chapter3/recipe4

I believe it should print Heading before Hello World p text. but its not coming. Let me know what I am missing in my code -

PLNKR CODE

Code as a Whole -

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>Directive Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script>
        var myApp = angular.module("myApp", []);

        myApp.directive("myWidget", function(){
            return {
                restrict: "E",
                transclude: true,
                template: "<div ng-transclude><h3>Heading</h3></div>"
            };
        });
    </script>
</head>
<body>
    <my-widget>
        <p>Hello World!!</p>
    </my-widget>
</body>
</html>

noypi · Accepted Answer · 2014-09-08 13:53:10Z

6

check the first "h3" before "div"

template: "<h3>Heading</h3><div ng-transclude></div>"

answered Sep 8, 2014 at 13:53

noypi

99110 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Trialcoder Over a year ago

Why I need to change as the recipe is placing h3 in div and its code is working too, but not in a single file ?

noypi Over a year ago

the content is added inside the ng-transclude. you can wrapped it with another <div> if you want.

Mark Rajcok · Accepted Answer · 2015-03-31 02:36:09Z

2

The reason you need to change the recipe is because Angular changed how transclusion works between v1.0 and v1.2.

With change eed299a3, Angular now "clears the translusion point before transcluding."

If you load v1.0 (which is what the github repository uses), you will see "Heading". With v1.2, you won't see "Heading", unless you modify the template the way @Noypi explained.

answered Mar 31, 2015 at 2:36

Mark Rajcok

365k114 gold badges501 silver badges495 bronze badges

Collectives™ on Stack Overflow

ng-transclude not working in template AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related