CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directivetransclusion
Trialcoder
Trialcoder

Reputation: 6004

ng-transclude not working in template AngularJS

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>

Upvotes: 2

Views: 5800

Answers (2)

Mark Rajcok
Mark Rajcok

Reputation: 364677

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.

Upvotes: 2

noypi
noypi

Reputation: 991

check the first "h3" before "div"

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

Upvotes: 6

Related Questions