Snippet: http://plnkr.co/edit/zYd13f4EelPcQqJrguVh?p=preview
var app = angular.module("inputGroupApp", []);
app.controller('numbersController', ['$scope', function($scope){
$scope.data = {}
$scope.data.numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
}]);
app.directive('labelGroup', ['$compile', '$timeout', function($compile, $timeout) {
return {
'template' : '<div class="label-group">' +
'<label class="label-group-label"></label>' +
'<div class="label-group-content"></div>' +
'</div>',
'restrict' : 'E',
'transclude' : true,
'replace' : true,
'link' : function(scope, elem, attr, nullController, transclude) {
var labelElem = elem.find('.label-group-label');
var contentElem = elem.find('.label-group-content');
transclude(scope, function(clone) {
var tLabel = null;
var tContent = null;
angular.forEach(clone, function(node) {
var $node = angular.element(node);
// empty nodes by removing contents
if ($node.is('label-group-label')) {
tLabel = $node.contents();
labelElem.append(tLabel);
} else if ($node.is('label-group-content')) {
tContent = $node.contents();
contentElem.append(tContent);
}
});
$compile(contentElem)(scope);
console.log('contentElem ', contentElem);
console.log('elem ', elem);
});
}
};
}]);
I am developing a directive to create a custom label and content pairing using transclusion. My goal is to have the transcluded elements compile successfully, especially when they include directives like ng-repeat. However, I am facing difficulties in getting the transcluded elements to render correctly. Any insights on resolving this issue would be greatly appreciated.
I may need to rethink my approach to solving this problem effectively.