According to the definition of Transclusion in angular.js "With transclude enabled, anything that exists inside the welcome element in the view will be appended to the contents of whichever element in the template has the ng-transclude attribute.", I was trying to understand following behavior:-
<html>
<head>
<title>AngularJS Services</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script type="text/javascript" src="abc.js"></script>
</head>
<body ng-app="myApp">
<tab>
hello world
</tab>
</body>
</html>
Angular Code:-
var myApp=angular.module('myApp',[]);
function tab(){
return {
restrict : "E",
transclude: true,
template: '<h2 ng-transclude>Hello world!</h2>\
<div role="tabpanel" ng-transclude>kickass</div>',
scope: {},
link: function(scope,element,attrs){}
};
};
myApp.directive('tab',tab);
Now if u give ng-transclude inside h2 tag the contents under h2 are getting destroyed, however when I give ng-transclude in div it works fine. Transclusion here according to definition says that the values would be appended to anything between the tags. Please collect me if I am wrong.
