How to use angular directives that need parameters conditionally

Question

I am looking for a solution that lets me use either ng-repeat or collection-repeat for a repeating list depending on a set variable.

I understand there are the following possibilities:

1. Use dynamic templates and load the right template at run time
2. Potentially use ng-attr

I want to avoid 1, because I don't want two templates - I'll have to keep updating code in both.

As far as 2 is concerned, it does not look like I can apply it to directives that pass parameters (Angular - Use attribute directive conditionally)

What I want to achieve is this:

//if $root.platformOS == "desktop"
<ion-item ng-repeat="event in events| filter:search.text" item-height="event.Event.height" id="item-{{$index}}">

//if $root.platformOS != "desktop"
<ion-item collection-repeat="event in events| filter:search.text" item-height="event.Event.height" id="item-{{$index}}">

Thank you.

Answer 1

app.directive('repeat', function ($compile, $rootScope) { 
  return {
    restrict: 'A',
    priority: 2000,
    terminal: true,
    link: function (scope, element) {
      var repeatDirective = ($rootScope.platformOS == 'desktop') ? 'ng-repeat' : 'collection-repeat';

      element.attr(repeatDirective, element.attr('repeat'));
      element.removeAttr('repeat');
      $compile(element)(scope);
    }
  };
});

This way the directives are abstracted to a single one, since their syntax is the same.

Wrapping both repeats into a directive that are switched in directive's template would be the best, but it may be undesirable if extra wrapper elements don't suit the layout.