Search code examples
javascripthtmlangularjsangularjs-directivetransclusion

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>
Solution

  • check the first "h3" before "div"

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