Question

我有一个功能＆＃39; highlightBookmark＆＃39;这应该会在2秒后更改列表项的背景颜色。但它不起作用！它改变了＆＃39; li＆＃39;仅当click事件调用该函数时才显示背景。它不会在时间结束后自动更改，即使它实际上是在调用函数。

这是我的代码：

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);
}

高亮显示功能，取整数，在该位置查找对象并更新设置＆＃39; class＆＃39;参数为true。例如，如果我将数字1传递给函数，它将在索引2处查找对象并设置＆＃39;类属性＆＃39;是真的。

然后，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

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

var interval = $interval(checkTime, 100);

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

请注意clearInterval(interval)

interval.cancel()

另外不要忘记将其作为依赖注入。
charlietfl的公平点：如果范围被破坏，也取消间隔。

将它放在你的控制器内：

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

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

Answer 2

setInteral和setTimeout在角度摘要周期之外运行，因此Angular无法正确选取它们。

考虑在控制器中使用$ timeout对象 - 这会为您提供超时功能，但允许角度来监视它。

Answer 3

您应该考虑使用有角度的$timeout代替setInverval或setTimeout。

因为：

此功能不会$digest $scope变量;
$timeout需要更少的内存来完成与$interval完全相同的事情。

因此，控制器的这一部分将如下所示：

//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;
}

$timeout(checkTime, 2000);

function checkTime(){
    highlightBookmark(1);
}

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

请记住在控制器中注入$timeout作为依赖项。

P.S。

此代码将在2秒后标记默认值，您没有提供足够的详细信息，因此我可以知道player正在做什么。因此，如果您想要改进这一点，请提供更多详细信息，我们可以实现这一目标。

您应该考虑使用“控制器为”。这是John Papa关于它的文章的链接。 https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/

如果您想toggle点击事件的背景，您应该使用此代码。因为您所做的只是添加背景，而不是从其他人li中删除。为此，我们需要稍微修改html和controller：

<div ng-app="classApp" ng-controller="classCtrl">
   <ul id = "bookmarkList">
    <li ng-repeat="bookmark in markers" ng-class="{'active': selectedMarker === bookmark}" ng-click="jumpTo(bookmark)">{{bookmark.text}}</li>
   </ul>
</div>

$scope.selectedMarker = null;

function highlightBookmark(marker) {
   $scope.selectedMarker = marker;
}

$timeout(checkTime, 2000);

function checkTime(){
   highlightBookmark($scope.markers[0])
}

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

氰

为什么ng-class没有使用setTimeout更新？角

4 个答案:

因为：

P.S。