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:为什么't 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');