javascript - NG-Repeat 后运行指令

Question

因此，我希望尽可能将我的插件库移至 Angular，以保持一致性。我遇到的问题是让指令在其子项上的任何指令运行后运行。

只是为了说明一点，这里的目标是让我们的集成商(仅限 CSS/HTML 的团队成员)可以轻松地通过使用特性标记来向项目添加动态功能。目前他们通过 data-features 属性来做到这一点。例如，对于图像 slider ，他们可能会使用 data-features="imageSlider" 属性标记 UL 以使该 UL 成为 slider 。

按照这些思路，我正在努力将该图像 slider 模块移至 Angular 。我希望我的集成商能够编写如下内容:

<ul image-slider>
    <li slide>
         My Slide 1
    </li>
    <li slide>
         My Slide 2 
    </li>
    <li slide>
         My Slide 3
    </li>
</ul>

而且我可以将其动态地转换为图像 slider 。以上工作正常，但是如果标记如下所示:

<ul image-slider>
    <li slide ng-repeat="slide in data.slider.slides">
         My Slide {{$index}}
    </li>
</ul>

然后 ng-repeat 在 image-slider 指令运行之前没有完成，这意味着我无法访问所有幻灯片来发挥我的魔力.

有没有一种方法可以告诉 image-slider 指令在触发之前等待其中的任何指令完成？

我已经阅读了以下问题:

• Directive that run after ng-repeat
• Angularjs custom directive highlight text after ng repeat has run
• Running parent directives after children directives

这些似乎都没有解决这个问题的答案，所以我想我会提出一个更简洁的问题，希望能找到答案。

Answer 1

我建议采用更简单的方法。使用 $timeout 函数。如果将 $timeout 设置为零，它将在一切运行完后立即运行:

app.directive("imageSlider", [ '$timeout', function($timeout) {
    return function(scope, element, attrs)
    {
        // your data is defined in scope.data.slider.slides

        $timeout(function() 
        {
            // This code will run whenever the page has finished processing
            // So it will run after ng-repeat has finished
        }, 0);
    }
}]);