Question

我在使用含有多种元素的ng-repeat方面遇到了一些麻烦。请考虑以下html：

<li>
    <a href="/">Link</a>
</li>
<li class="divider-vertical"></li>

我想对每一个链接重复这一点，但我不能，因为ng-repeat会继续使用li，因此会错过分隔符li。

另一个（有些不确定的）stackoverflow线程有以下指令：

app.directive('dividerVertical', function() {
  return {
    restrict: 'A',
      link: function(scope, element, attrs) {
        element.after('<li class="divider-vertical"></li>');
      }
  }
});

像这样使用：

<li ng-repeat="link in links" divider-vertical>
   <a href="{{ link.path }}">{{ link.name }}</a>
</li>

这给了我以下内容：

Link1 Link2 Link3 | | |

而不是期望的：

Link1 | Link2 | Link3

我不确定我在那里做错了什么，或者方法是否根本错误。

这感觉它应该是非常简单的实现，也许我完全走错了路，任何指针都会非常感激。

Answer 1

更新：将 $ timeout 更改为范围。$ evalAsync 以确保没有闪烁并将其与角度方式对齐。见this answer

ng-repeat尚未将元素添加到dom中。 ~~在超时时包装你的追加将会起到作用。~~

Demo

app.directive('dividerVertical', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
      link: function(scope, element, attrs) {
        //added this since I think this is the actual use case ;)
        if(!scope.$last) {
          scope.$evalAsync(function() {
            element.after('<li class="divider-vertical">|</li>');
          });
        }
      }
  }
}]);

~~PS：这里的$ timeout没有什么特别之处，setTimeout也能正常工作，但我喜欢保持与角度世界的一致。~~

Answer 2

我认为目前解决这个问题的方法是使用ng-repeat-start和ng-repeat-end。您还可以通过查看ngRepeat指令中的$ last变量来删除最后一个链接之后的分隔符

<li ng-repeat-start="link in links">
  <a href="{{link.path}}">{{link.name}}</a>
</li>
<li ng-if="!$last" class="divider-vertical" ng-repeat-end></li>

ng-repeat包含多个元素

2 个答案: