Javascript angularJS ng重复迭代器字符串重用

我发现我在angularJS中显示一些表格时违反了“不要重复你自己”的咒语

下面是一个简单（而且荒谬）的例子，其中我们有两个模板，根据相同的ng重复显示名字或姓氏：

firstname.html：

<table>
  <tr ng-repeat="person in people | filter: filterText | orderBy: sortField">
    <td>{{ person.first }}</td>
  </tr>
</table>

<table>
  <tr ng-repeat="person in people | filter: filterText | orderBy: sortField">
    <td>{{ person.last }}</td>
  </tr>
</table>

<table>
  <ng-include src="iterator.html">
    <td>{{ person.first }}</td>
  </tr>
</table>

{{person.first}

lastname.html：

<table>
  <tr ng-repeat="person in people | filter: filterText | orderBy: sortField">
    <td>{{ person.first }}</td>
  </tr>
</table>

<table>
  <tr ng-repeat="person in people | filter: filterText | orderBy: sortField">
    <td>{{ person.last }}</td>
  </tr>
</table>

<table>
  <ng-include src="iterator.html">
    <td>{{ person.first }}</td>
  </tr>
</table>

{{person.last}}

现在，如果我想更改迭代器表达式，我必须在每个模板中更改两次。ng include似乎不支持转换，否则我会这样做：

iterator.html：

<tr ng-repeat="person in people | filter: filterText | orderBy: sortField">
  <ng-transclude></ng-transclude>

firstname.html：

<table>
  <tr ng-repeat="person in people | filter: filterText | orderBy: sortField">
    <td>{{ person.first }}</td>
  </tr>
</table>

<table>
  <tr ng-repeat="person in people | filter: filterText | orderBy: sortField">
    <td>{{ person.last }}</td>
  </tr>
</table>

<table>
  <ng-include src="iterator.html">
    <td>{{ person.first }}</td>
  </tr>
</table>

{{person.first}

真正的表要复杂得多，所以不像这个例子那么简单。我可以想象为此创建一个指令，但它只针对我的应用程序的一个页面，所以这似乎有些过分。另外，ng repeat=“getFilteredSortedPeople（）中的person”是一个选项，但是在每次摘要中调用该函数时性能很差

---

有人对实现这一点的最佳方法有什么建议吗？

您可以将代码重构为指令：

app.directive('tableRow', function () { // app is the name of your angular module
    return {
        scope: {
            items: '=',
            field: '@',
            filterText: '=',
            sortField: '='
        },
        template: '<tr ng-repeat="item in items | filter: filterText | orderBy: sortField"><td>{{ item[field] }}</td></tr>'
    };
});

---

Nicolás的答案有效，但仍然在模板中留下大量重复。我最终得到了一个在模板中只留下很少重复的解决方案。简言之：

app.directive("myRepeat", function($compile) {
  return {
    terminal:true,
    priority:1001,
    link: {
      pre: function(scope, el, attrs) {
        el.removeAttr('my-repeat');
        el.attr('ng-repeat', scope.$eval(attrs.myRepeat));
        $compile(el)(scope);
      }
    }
  };
});

在控制器中：

$scope.iteratorString = "item in items | filter: foo | orderBy: bar";

在模板中：

<tr myRepeat="iteratorString">...</tr>

。。。