angularjs - Weird behavior of $index in ngRepeat

Question

I'm using Ionic framework and I have the following code:

WORKS FINE:

<ion-slide-box on-slide-changed="slideChange()">
    <ion-slide ng-repeat="selected in instanceList">
        {{$index}}
        <div ng-if="currSlide==$index || !currSlide">
            CONTENT
        </div>
    </ion-slide>
</ion-slide-box>

DOESN'T WORK:

<ion-slide-box on-slide-changed="slideChange()">
    <ion-slide ng-repeat="selected in instanceList">
        <div ng-if="currSlide==$index || !currSlide">
             CONTENT
        </div>
    </ion-slide>
</ion-slide-box>

For those who are not familiar with Ionic, this function ensures me that currSlide is always updating its value and it's always the same value of $index:

$scope.slideChange = function() {
    $scope.currSlide = $ionicSlideBoxDelegate.currentIndex();
};

More details: When I say that the second code doesn't work: the content of the first slide appears, but when I change slides, the content of the div doesn't appear. In the first code everything appears just fine (also the $index I am printing).

CODEPEN: http://codepen.io/anon/pen/mdsIr

Answer 1

的双向数据绑定在指令{{}}中{{$index}}有 a $watch，因此删除 {{}} 会删除更新幻灯片的 $watch。