Creating a custom repeater with ng-repeat - angularjs

Question

I want to create a custom repeater directive and pass the expression to the ng-repeat inside of the directive template.
The reason for this is to provide a cleaner interface in the html, as I am also including other directives "under-the-hood".
http://jsfiddle.net/DeanIconWeb/Cg9RC/1/
Here is my html template:
<tr custom-repeater="person in people">
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
<td>{{person.age}}</td>
</tr>
Here is my directive:
app.directive("customRepeater", function(){
return {
priority : 2000,
restrict: 'A',
replace : true,
transclude : true,
scope : {
ngRepeatExp : "#customRepeater"
},
template : "<tr ng-repeat='{{ngRepeatExp}}' ng-class-even=\"'even'\" ng-transclude></tr>"
}
});
In trying to make this work I kept getting the "Template must have one root element" error.
I did eventually do the following, but it's not what I really want.
<tr ng-repeat="person in people" custom-repeater>
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
<td>{{person.age}}</td>
</tr>
Directive
app.directive("customRepeater", function($compile){
return {
priority : 2000, //must be compiled before the ng-repeat (priority 1000)
restrict: 'A',
compile : function(tElem, tAttrs){
tElem.attr("ng-class-even", "'even'" );
}
}
});

Answer 1

You could use the $compile service to do something like this (add your other attributes/directives as you see fit before you consume the service):
http://jsfiddle.net/mQS4f/
app.directive("customRepeater", function ($compile) {
return {
//priority: 2000,
//restrict: 'A', // This is implicit
//replace: true,
//transclude: true,
//template: "<tr ng-repeat='{{ngRepeatExp}}' ng-class-even=\"'even'\" ng-transclude></tr>"
link: function (scope, element, attrs) {
attrs.$set('ng-repeat', attrs.customRepeater);
element.removeAttr('custom-repeater');
$compile(element)(scope);
}
}
});