1

我在将 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

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

这感觉应该很容易实现，也许我完全走错了路，任何指针都会非常感激。

4

2 回答 2

1

我认为当前处理这个问题的方法是使用 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>
于 2015-04-15T22:34:02.227 回答
1

UPDATE: changed $timeout to scope.$evalAsync to ensure no flicker and align it to the angular way. see this answer

ng-repeat hasn't added the element to the dom yet. Wrapping your append in a timeout will do the trick.

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: there is nothing special about the $timeout here, setTimeout will work just as well, but I like to keep things consistent with angular world.

于 2013-06-17T12:14:09.053 回答