Question

我有一些代码可以隐藏和显示幻灯片，如下所示：

<img ng-src="{{slide}}" ng-repeat="slide in slides" ng-show="$index == onSlide">

<a id="previousButton" type="button" ng-show="onSlide" class="left carousel-control" ng-click="onSlide = onSlide - 1">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a id="nextButton" type="button" ng-hide="onSlide == slides.length - 1" class="right carousel-control" ng-click="onSlide = onSlide + 1">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

使用按钮时性能很好，幻灯片立即切换。但是，如果我在控制器中更改scope.onSlide，则幻灯片切换会出现极端延迟，尽管console.log显示scope.onSlide确实会立即递增。什么可能导致滞后？

相关控制器代码：

scope.$on("videoTimeChanged", function(event, time) {

    if (scope.videoState == "playing") {
        if (time > scope.scenario.presentation[0].syncManifest[scope.onSlide]) scope.onSlide++;
    }

});

正如你所看到的，我正在聆听一个时间事件，它将每250毫秒左右触发一次，并将时间与幻灯片应该改变的时间进行比较。如果当前时间更长，我会增加幻灯片。当我在console.log中观看它的各个部分时，它在幕后完美运行。

Answer 1

这可能是因为ng-repeat创建了一个新的范围，并且在ng-show中你分配了一个原始值而不是一个对象。

尝试在控制器中创建一个对象，如$ scope.carousel.onSlide，并将ng-show指定给carousel.onSlide。

请在所有ng-clicks中参考carousel.onSlide。

经典：https://egghead.io/lessons/angularjs-the-dot

角慢慢隐藏/显示

1 个答案: