javascript - 如何在同一页面上使用 2 个 ng-repeat 指令在 Angular 中隔离/封装 $index ？

Question

我有一个使用 Angular 1.4 构建的网站，其中有 2 张幻灯片。一个位于标题中，另一个用于合作伙伴 Logo slider 。当一切都说了、做了之后，他们的看法是一样的。

标题

<div layout="row">
<div flex="100" flex-gt-sm="70" hide-xs class="header-slider center">
    <img 
        ng-repeat="i in slides" 
        class="header-slide-animation"
        src="{{i.img}}"  
        ng-hide="!isCurrentSlideIndex($index)" 
        ng-class="{'active':isCurrentSlideIndex($index)}"/>
</div>

然后这是 Logo slider

<div class="partners-slider center">
<a ng-repeat="i in slides" 
    class="slide-animation" 
    href="{{i.href}}" 
    target="_blank" 
    ng-hide="!isCurrentSlideIndex($index)" 
    ng-class="{'active':isCurrentSlideIndex($index)}">
     <img src="{{i.img}}" alt="{{i.title}}" />
</a>

我正在这里学习本教程 http://onehungrymind.com/build-sweet-photo-slider-angularjs-animate/它使用 TweenMax 为侧面设置动画。

页面上的一张幻灯片放映一切都很好，但我将每个幻灯片分成单独的指令并包含在同一页面上，问题是 $index 存在冲突。合作伙伴 Logo 动画比标题幻灯片移动得更快，并且还具有更大的数组，因此您可以想象当标题的 $index 被另一个覆盖并超出范围等时的问题...我可以做什么来隔离 $索引以便两个幻灯片不会相互重叠？

Answer 1

问题不是 $index ，而是每个指令共享父 Controller 范围的共享范围。

$index 实际上是隔离的，因为它只存在于 ng-repeat 的每个子作用域中

因此，无论 isCurrentSlideIndex($index) 在 Controller 中执行的操作都将由两个实例共享

简单的解决方案是在指令中使用隔离范围，因此两者都是单独的实例。

只需将 Controller 中使用的方法移至指令即可。然后，您可以使用指令中的一个属性从父 Controller 接收隔离范围内的图像