Question

我决定实施一组由this question中概述的线连接的圆圈。一切似乎在静态HTML中都能很好地工作，但是当我使用Angular的重复动画时，圆圈证明是左边的。它可以通过以下jsFiddle清楚地说明： https://jsfiddle.net/1ho1zz59/

<ul class="progress-rnd">
    <li ng-repeat="step in steps">
      {{step.name}}
    </li>
</ul>

基于此，我只有两个问题：

为什么会这样？
我该如何解决？

谢谢！

Answer 1

问题在于text-align: justify;适用于html，其中的空格与角度生成的空格不同（li标记后面跟着注释的html和下一个标记）。该指令应该有效，example：

var app = angular.module('testApp', []);
angular.module('testApp')
.directive('addASpaceBetween', [function () {
        'use strict';
        return function (scope, element) {
            element.after(' ');
        }
    }
]);

并将其添加到重复ng-repeat="step in steps" data-add-a-space-between

Answer 2

原因是因为在Html中，当你有元素内联块时，它们之间有空格，在本例中是你的LI标签。您可以通过在CSS中创建它们之间的实际距离来修复它，而不是依赖于HTML。

解 http://jsbin.com/qumawex/edit?css,output

在ng-repeat中渲染LI时，AngularJS不尊重CSS样式

2 个答案: