javascript - 为什么 ng-class 不使用 setTimeout 进行更新？ Angular

Question

我有一个函数“highlightBookmark”，它应该在 2 秒后更改列表项的背景颜色。但它不起作用!仅当单击事件调用该函数时，它才会更改“li”背景。它不会在超时后自动更改它，即使它实际调用了该函数也是如此。

这是我的代码:

Controller.js

//markers
$scope.markers = [
    {
        time: 9.5,
        text: "Bookmark 1",
        class: false
    },
    {
        time: 106,
        text: "Bookmark 2",
        class: false
    }
]

$scope.currentBookmark = -1;

function highlightBookmark(index) {
    $scope.markers[index].class = true;
}

var interval = setInterval(checkTime, 100);

function checkTime(){
    if(Math.floor(player.currentTime()) == 2){
        highlightBookmark(1)
        clearInterval(interval);
    }
}

$scope.jumpTo = function (index) {
    highlightBookmark(index);
}

高亮功能，接受一个整数，在那个位置寻找对象并更新设置“类”参数为真。例如，如果我将数字 1 传递给函数，它将在索引 2 处查找对象并将“类属性”设置为 true。

然后，2 秒后我想调用 highlightBookmark 函数。它被调用但它不更新类，因此背景不更新。

我用点击事件调用了相同的方法，它起作用了。

HTML文件

<ul id = "bookmarkList">
    <li ng-repeat="bookmark in markers" ng-class="{'active': bookmark.class}" ng-click="jumpTo($index)">{{bookmark.text}}</li>
</ul>

这个 li 有我想要在 2 秒后更改的 ng-class 属性。

这是我在 codepen 上做的类似代码的链接。它会在单击时更改按钮颜色，但即使调用方法也不会在 setTimeout 上更改

https://codepen.io/Octtavius/pen/wgzORv

有人可以帮忙解决这个简单的问题吗？

Answer 1

普通 setInterval 函数不会更新范围变量。尝试使用 Angular 的 $interval API:

var interval = $interval(checkTime, 100);

function checkTime(){
    if(Math.floor(player.currentTime()) == 2){
        highlightBookmark(1)
        interval.cancel();
    }
}

1. 注意 clearInterval(interval) 更改为 interval.cancel()
2. 另外不要忘记将它作为依赖项注入(inject)。
3. charlietfl 的公平点:如果范围被破坏，也取消间隔。

将它放在你的 Controller 中:

$scope.$on("$destroy", function( event ) {
    interval.cancel( timer );
});

更多信息:https://docs.angularjs.org/api/ng/service/$interval