Question

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

我知道有以下可能性：

使用动态模板并在运行时加载正确的模板
可能使用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);
    }
  };
});

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

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

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

1 个答案: