My directive includes an ng-repeat in the template and also has an ng-transclude option after the repeater to allow users to input their own content. The issue arises when the custom content is surrounded by an ng-transclude element upon rendering, which is not desired.
This is how the directive looks:
angular.module("MyModule", [])
.directive('myDirective', [function () {
return {
restrict: 'EA',
transclude: true,
replace: true,
scope: {},
templateUrl: 'templates/template_view.html',
link: function (scope, element, attrs) {
scope.nodes = [
{
"imageSource": "",
"title": "Sample Title",
"body": "Lorem ipsum and some other stuffs",
"readMore": "",
"date": "Mar 20"
}
];
}
};
}]);
This is the template code:
<section>
<div class="someClass" ng-repeat="node in nodes">
<div>
<img src="{{node.imageSource}}" alt="Picture">
</div>
<div class="content bounce-in">
<h2>{{node.title}}</h2>
<p>{{node.body}}</p>
<a href="{{node.readMore}}" ng-show="{{node.readMore}}">Read more</a>
<span>{{node.date}}</span>
</div>
</div>
<div ng-transclude></div>
</section>
To use the directive, you can follow this example:
<div my-directive>
<div class="someClass">
<h2>Title of section 1</h2>
<p>Lorem ipsum dolor </p>
<span class="cd-date">Jan 14</span>
</div>
<div class="someClass">
<h2>Title of section 2</h2>
<p>Lorem ipsum dolor</p>
<span class="cd-date">Jan 18</span>
</div>
</div>
The output may include an unwanted <div ng-transclude> element wrapping the transcluded data.