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

Question

I have a website built with Angular 1.4 with 2 slideshows. One in the header and one for a partner logo slider. They are in the same view when all it said and done.

Header

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

And then here's the 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>

I'm following this tutorial here http://onehungrymind.com/build-sweet-photo-slider-angularjs-animate/ and it uses TweenMax animate the sides.

Everything was working great with one slide show on the page but I have each split into separate directives being included on the same page and the problem is that $index is conflicting. The partner logo animation moves faster than the header slide show and also has a larger array so you can imagine the problem when the header's $index gets overwritten by the other and is out of range, etc... What can I do to isolate $index so the two slideshows don't step on each other?

Answer 1

It's not $index that is the problem, it is the shared scope whereby each directive is sharing the parent controller scope.

$index is actually isolated as it only exists in each child scope of ng-repeat

So whatever isCurrentSlideIndex($index) is doing in controller will be shared by both instances

The simple solution is to use an isolated scope in directive so both are separate instances.

Just move the methods used in controller to directive. You can then use one attribute in directive to receive the images in the isolated scope from the parent controller

Answer 2

Alright I found an article that helped me realize a solution to the problem. http://codeutopia.net/blog/2014/11/10/angularjs-best-practices-avoid-using-ng-repeats-index/

Overall the moral of the story is not to use $index because it can be problematic. I chose to modify the view to pass the image object and check for that against the current index.

HTML

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

This is what the JavaScript was

$scope.isCurrentSlideIndex = function (image) {
    return $scope.currentIndex === index;
};

This is what I changed it to

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

And it works :-)