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> 

теги просто 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: Why doesn't CSS justification work with ng-repeat?
Это использование проблема нг-повторить пуск и нг-повторить конец, чтобы исправить это:

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

причина, почему у вас есть эта проблема, потому что созданного HTML ngRepeat не хватает правильного интервала, и свойство justify css будет работать неправильно. Так что вам нужно сделать, это добавить правильный интервал.

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

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