When trying to access the result of ng-repeat, I discovered that using the transclude function and manually compiling could help. However, this method does not work in situations with two places and elements containing ng-repeat. Here is how my code is structured:
return {
restrict: 'E',
require: '?ngModel',
template: 'HTML'
transclude: true,
replace: true,
link: function(scope, element, attrs, ngModelCtrl, $transclude) {
var caption = element.find('.caption');
var dropdown = element.find('.dropdown-menu');
$transclude(function(clone) {
//var clone_clone = clone.addClass('ng-hide');
//$compile(clone.contents())(scope.$new()).appendTo(caption);
$compile(clone)(scope.$new()).appendTo(dropdown);
$compile(clone)(scope.$new()).appendTo(caption);
});
}
};
While it works when running just one compile, it throws an exception on the second attempt. I have experimented with using clone() and contents(), along with transclude: 'element'. How can I achieve the desired outcome? I need it to behave similarly to ng-transclude (which does not support ng-repeat since there is only one element inside the link instead of a list).
UPDATE: Usage Example:
<dropdown>
<li><a>foo</a></li>
<li><a>bar</a></li>
<li><a>baz</a></li>
</dropdown>
<dropdown>
<li ng-repeat="item in items"><a>{{item.label}}</a></li>
</dropdown>