ng-repeat с более чем одним элементом

Question

У меня возникли некоторые проблемы, связанные с использованием ng-repeat с несколькими элементами. Рассмотрим следующий HTML:

<li> 
    <a href="/">Link</a> 
</li> 
<li class="divider-vertical"></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

UPDATE: изменен $ таймаут в сферу $ evalAsync чтобы убедиться в отсутствии мерцания и выровнять его с угловым способом.. см. this answer

ng-repeat еще не добавил элемент в dom. Обманирование вашего добавления в тайм-аут сделает трюк.

Demo

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: нет ничего особенного в $ таймаут здесь, SetTimeout будет работать так же хорошо, но мне нравится держать вещи в соответствии с угловым миром.

Answer 2

Я думаю, что нынешний способ справиться с этим будет использовать ng-repeat-start и ng-repeat-end. Вы также могли бы избавиться от делителя после последнего звена, глядя на $ последние переменный из директивы ngRepeat

<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>