ng-repeat具有多个元素

Question

我在将ng-repeat与多个元素一起使用时遇到一些麻烦。 考虑以下html：

<li>
    <a href="/">Link</a>
</li>
<li class="divider-vertical"></li>

我想对每个链接重复该操作，但我不能，因为ng-repeat会出现在li上，因此错过了除法器li。

另一个（有点不确定的）stackoverflow线程具有以下指令：

app.directive('dividerVertical', function() {
  return {
    restrict: 'A',
      link: function(scope, element, attrs) {
        element.after('<li class="divider-vertical"></li>');
      }
  }
});

像这样使用：

<li ng-repeat="link in links" divider-vertical>
   <a href="{{ link.path }}">{{ link.name }}</a>
</li>

这给了我以下内容：

Link1 Link2 Link3 | | |

而不是所需的：

Link1 | Link2 | Link3

我不确定那里是否存在我做错的事情，或者方法根本上是错误的。

感觉这应该很容易实现，也许我完全走错了路，任何指针将不胜感激。

Answer 1

更新 ：将$ timeout更改为 scope。$ evalAsync以确保没有闪烁并将其与角度对齐。 看到这个答案

ng-repeat尚未将元素添加到dom。 将您的追加包装在超时中将达到目的。

演示

app.directive('dividerVertical', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
      link: function(scope, element, attrs) {
        //added this since I think this is the actual use case ;)
        if(!scope.$last) {
          scope.$evalAsync(function() {
            element.after('<li class="divider-vertical">|</li>');
          });
        }
      }
  }
}]);

PS：这里的$ timeout没什么特别的，setTimeout也可以工作，但是我想保持角度与世界一致。

Answer 2

我认为当前处理此问题的方法是使用ng-repeat-start和ng-repeat-end。 您还可以通过查看ngRepeat指令中的$ last变量来摆脱最后一个链接之后的分隔线

<li ng-repeat-start="link in links">
  <a href="{{link.path}}">{{link.name}}</a>
</li>
<li ng-if="!$last" class="divider-vertical" ng-repeat-end></li>