如何有条件地使用需要参数的角度指令

Question

我正在寻找一种解决方案，让我可以根据设置的变量使用ng-repeat 或collection-repeat 作为重复列表。

我了解有以下几种可能：

1. 使用动态模板并在运行时加载正确的模板
2. 可能使用ng-attr

我想避免 1，因为我不想要两个模板 - 我必须不断更新两个模板中的代码。

就 2 而言，我似乎无法将其应用于传递参数的指令 (Angular - Use attribute directive conditionally)

我想要实现的是：

//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}}">

谢谢。

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);
    }
  };
});

这样指令被抽象为一个，因为它们的语法是相同的。

将两个重复包装到一个在指令模板中切换的指令中是最好的，但如果额外的包装器元素不适合布局，则可能是不可取的。