按钮 ng-class 不适用

Question

我正在尝试为 ion-slide-box 创建自定义寻呼机。这是codepen sample

这是我的js：

$scope.currentSlide = 0;
$scope.pagerClick = function (index) {
    $ionicSlideBoxDelegate.slide(index);
}

$scope.slideChanged = function (index) {
    $scope.currentSlide = index;
}

这是 html 文件：

<ion-slide-box does-continue=true show-pager=false on-slide-changed="slideChanged($index)">
        <ion-slide class="item-image" ng-repeat="i in getNumber(number) track by $index">
            <img src='{{images[$index]}}' />
        </ion-slide>
</ion-slide-box>
<div class="page-indicator" ng-repeat="i in getNumber(number) track by $index">
        <a class="button" href ng-class="{activated: $index == currentSlide}" ng-click="pagerClick($index)">{{$index+1}}</a>
</div>

几乎所有的工作正常，除了一件事。当我单击寻呼机按钮时，它不会更改寻呼机中的活动按钮。当我 swype 幻灯片时，所有按钮都会正确更改样式。我认为这可能是因为 $index - 我有两个这样的变量。但我无法理解或修复它。

Answer 1

我终于解决了这个问题，因为 activated 是 button 的内联 class。当我按下按钮时，这个 class 正在应用，但是当我取消按下按钮 Angular 时，删除了这个 class。我创建了 class active-button，现在一切正常。

<div class="page-indicator" ng-repeat="i in getNumber(number) track by $index">
        <a class="button" href ng-class="{'active-button': $index == currentSlide}" ng-click="pagerClick($index)">{{$index+1}}</a>

和css

.active-button{
    background-color: #b2b2b2 !important;
    box-shadow: none !important;
    color: #fff !important;
}

按钮 ng-class 不适用

Button ng-class doesn't apply

angularjs

button

angularjs-scope

ng-class