Sorry, if something stupid I am missing here, but I really tried various bos to make this code work, but no luck.
I am learning directive
in AngularjS
from Recipes with AngularJS
but stuck at this code -
I believe it should print Heading before Hello World p
text. but its not ing. 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=".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>
Sorry, if something stupid I am missing here, but I really tried various bos 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./fdietz/recipes-with-angular-js-examples/tree/master/chapter3/recipe4
I believe it should print Heading before Hello World p
text. but its not ing. 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./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>
Share
Improve this question
asked Sep 8, 2014 at 13:47
TrialcoderTrialcoder
6,01411 gold badges46 silver badges66 bronze badges
2 Answers
Reset to default 6check the first "h3" before "div"
template: "<h3>Heading</h3><div ng-transclude></div>"
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.