HTML CSS-трюк с оправданием не работает в сочетании с angularJS

Question

Я пытаюсь сделать элемент с внутренними элементами, который должен быть оправдан.

Теперь проблема в том, что когда я генерирую элементы с выравниванием по тексту AngularJS, выровнять не работает.

Я сделал пример, который имитирует это:

http://jsfiddle.net/2AaWf/1/

.container {
   text-align: justify;
}
span, a {
   display: inline-block;
}

Есть ли что-нибудь, что я могу изменить в AngularJS или с помощью CSS.

Как я могу это сделать?

Код AngularJS:

<a ng-repeat="tag in tags" href="#">{{tag.name}}</a>

tags это просто массив javascript:

[{"id":"1","name":"Tag name","count":"1","weight":2}]

Answer 1

Посмотрите на эту скрипку, я думаю, это то, что вам нужно: http://jsfiddle.net/2AaWf/10/

Я включил также живой пример AngularJS. Идея состоит в том, чтобы использовать элемент-оболочку (span) и поместить в него ссылку и пробел.

<span data-ng-repeat="tag in tags" href="#"><a href="#">{{tag.name}}</a> </span>

Answer 2

Вы можете обратиться к этой проблеме. Angular: почему выравнивание CSS не работает с ng-repeat?
Эта проблема использует ng-repeat-start и ng-repeat-end, чтобы исправить это:

<span ng-repeat-start="tag in tags"><a href="#">{{tag.name}}</a></span>
<span ng-repeat-end></span>

Причиной возникновения этой проблемы является то, что в созданном HTML-файле ngRepeat отсутствует правильный интервал, а свойство justify css не будет работать правильно. Итак, что вам нужно сделать, это добавить правильный интервал.

Кроме того, если вы используете директиву для добавления некоторых дополнительных элементов и хотите, чтобы она работала с "justify". Вы можете использовать '\n', чтобы создать интервал следующим образом:

element.append('<span><a href="#">Extra element</a></span>\n');