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>