Javascript 如何在同一页上使用2 ng repeat指令隔离/封装角度为的$index？

我有一个网站与2个幻灯片角度1.4建成。一个在标题中，一个用于合作伙伴徽标滑块。无论说什么做什么，他们的观点都是一样的

标题

<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>

然后是徽标滑块

<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>

我在这里学习这个教程，它使用TweenMax为边设置动画

---

页面上只显示一个幻灯片，一切都很好，但我将每个幻灯片拆分为单独的指令，并包含在同一页面上，问题是$index相互冲突。合作伙伴徽标动画的移动速度比页眉幻灯片放映速度快，并且具有更大的数组，因此您可以想象页眉的$index被另一个索引覆盖并且超出范围时出现的问题，等等。。。如何隔离$index，使两个幻灯片不会相互重叠？

问题不在于

$index

，而是每个指令共享父控制器作用域的共享作用域

$index

实际上是隔离的，因为它只存在于

ng repeat

因此，无论isCurrentSlideIndex（$index）在控制器中做什么，都将由两个实例共享

简单的解决方案是在指令中使用一个独立的作用域，这样两者都是独立的实例

---

只需将控制器中使用的方法移动到指令。然后，您可以在指令中使用一个属性从父控制器接收隔离作用域中的图像

问题不在于

$index

，而是每个指令共享父控制器作用域的共享作用域

$index

实际上是隔离的，因为它只存在于

ng repeat

因此，无论isCurrentSlideIndex（$index）在控制器中做什么，都将由两个实例共享

简单的解决方案是在指令中使用一个独立的作用域，这样两者都是独立的实例

---

只需将控制器中使用的方法移动到指令。然后可以使用指令中的一个属性从父控制器接收隔离范围内的图像

好的，我找到了一篇文章，帮助我实现了问题的解决方案

总的来说，这个故事的寓意是不要使用$index，因为它可能会有问题。我选择修改视图以传递图像对象，并对照当前索引进行检查

HTML

这就是我把它改成的

$scope.isCurrentHeaderSlide = function (slide) {
    return $scope.headerSlides[$scope.currentIndex] == slide;
};

---

它是有效的：-）

好吧，我找到了一篇文章，帮助我找到了解决问题的方法

总的来说，这个故事的寓意是不要使用$index，因为它可能会有问题。我选择修改视图以传递图像对象，并对照当前索引进行检查

HTML

这就是我把它改成的

$scope.isCurrentHeaderSlide = function (slide) {
    return $scope.headerSlides[$scope.currentIndex] == slide;
};

---

它可以工作：-）

这是一个很好的观点，但实际上两个指令都有自己的控制器。我本以为这会隔离$index范围…如果我在这里做错了什么，请告诉我，但这就是我如何定义每个指令以拥有自己的控制器<代码>nbis.directive（“headerSlideshowDir”，function（）{return{templateUrl:'templates/header slideshow.html'，controller:'headerSlideshowController'，replace:false}）；指令（“partnersSlider”，function（）{return{templateUrl:'templates/partners slider.html'，controller:'partnersSliderController'，replace:false}}）我猜这两条指令在很大程度上是彼此的副本。如果是这样的话，一个独立的作用域指令将执行所需的操作。但如果您对结果感到满意，这很好，这是一个很好的观点，但实际上两个指令都有自己的控制器。我本以为这会隔离$index范围…如果我在这里做错了什么，请告诉我，但这就是我如何定义每个指令以拥有自己的控制器<代码>nbis.directive（“headerSlideshowDir”，function（）{return{templateUrl:'templates/header slideshow.html'，controller:'headerSlideshowController'，replace:false}）；指令（“partnersSlider”，function（）{return{templateUrl:'templates/partners slider.html'，controller:'partnersSliderController'，replace:false}}）我猜这两条指令在很大程度上是彼此的副本。如果是这样的话，一个独立的作用域指令将执行所需的操作。但如果你对结果满意，那你就误解了

$index

问题。这篇文章是关于过滤的，索引是在过滤后的数组而不是原始数组上进行的。。。我知道这是一个单独的问题，但我决定无论如何都要传递对象，看看这是否能解决问题。你误解了

$index

问题。这篇文章是关于过滤的，索引是在过滤后的数组而不是原始数组上进行的。。。我知道这是一个单独的问题，但我决定无论如何都要传递对象，看看这是否能解决问题，它确实解决了。

$scope.isCurrentHeaderSlide = function (slide) {
    return $scope.headerSlides[$scope.currentIndex] == slide;
};