HTML CSS对齐技巧不能与angularJS结合使用

Question

我正在尝试使用内部元素来构造一个应该被证明的元素。

现在问题是，当我使用AngularJS生成元素时，text-align justify不再起作用。

我做了一个模拟它的例子：

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?
此问题使用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');