javascript - AngularJS ng重复溢出

Question

我正在尝试在固定宽度的容器内输出 html anchor 。使用 Angular 的 ng-repeat 时，链接会溢出到容器外。下面是 ng-repeat 的代码片段。有关溢出的示例，请参阅 jsfiddle。

http://jsfiddle.net/n1Lkybwf/2/

<div style="width: 200px; padding: 5px; border: solid 3px #000;">
    <a ng-repeat="tag in tags" style="margin-right: 5px;">{{tag}}</a>
</div>

Answer 1

问题是在 DOM 渲染之前计算容器的宽度(DOM 渲染是异步的)。在 Angular 中，这是事情发生的顺序......

默认情况下， anchor 标记显示为内联 block ，而简单的 div 显示为 block 。这就是为什么解决方案是 ng-repeat div 而不是 anchor 标记，然后通过使用 display: inline-block 为 div 设置样式来修复 block 显示。

  <div class="tag" ng-repeat="tag in tags" style="display:inline-block;">
    <a  style="margin-right: 5px;">{{tag}}</a>
  </div>

这是一个有效的 fiddle :http://jsfiddle.net/9zhc3bqu/