angular directive that takes a directive name as a parameter

Question

I am trying to create a list/grid that would know to render its items based on some directive where the row rendering directive would be a parameter of the grid.

I was able to create something like this:

<div repeat-directive-per-item="directiveName" items="my_items" item-attr="an_item"></div>

By returing a synthesised template from a template function but encountered problems when i tired to use this directive inside another directive.

Before i try to resolve those problems I wanted to ask if this could maybe done in some simpler way.

I am looking for some syntax like this:

<div ng-repeat="{{itemAttr}} in results" {{rowDirective}} /></div>

but it does not seem like ng-repeat is willing to do this type of interpulation.

I know I could also limit the pairs of rowDirective and matching itemAttr and do an if on them but it feels less general and less elegant.

Answer 1

You can not create attribute by using {{}} interpolation.

While creating template in directive you could use template function of directive, which can help you to add attribute by accessing attribute value.

template: function(element, attrs){
   return '<div ng-repeat="{{itemAttr}} in results" '+ attrs.repeatDirectivePerItem +' /></div>'
}