I have created a custom directive that transcludes the original content, parses it, and uses the data in the original content to construct the new content. The main concept behind it is as follows:
.directive('customList', function() {
return {
restrict: 'E',
transclude: true,
templateUrl: '...',
scope: true,
controller: function($scope, $element, $attrs, $transclude) {
var items;
$transclude(function(clone) {
clone = Array.prototype.slice.call(clone);
items = clone
.filter(function(node) {
return node.nodeType === 1;
})
.map(function(node) {
return {
value: node.getAttribute('value')
text: node.innerHTML
};
});
});
// Conduct further actions with the item data here
}
}
});
Subsequently, I implement it like so:
<customList>
<item value="foo">bar</item>
<item value="baz">qux</item>
</customList>
Everything functions properly in this manner. However, issues arise when attempting to apply an ng-repeat within the directive content, such as:
<customList>
<item ng-repeat="item in items" value="{{ item.value }}">{{ item.text }}</item>
</customList>
When trying this approach, there are no displayed items. Could anyone shed light on why this may not be functioning correctly, or suggest alternatives for achieving the same outcome?