3

我有一个无序列表，点击每个ListItem它都会调用setActive()

<li ng-repeat="slide in data" ng-click="setActive(slide.slideIndex)">
  <span class="listItemText">
    <b>{{slide.slideIndex + 1}}. </b>{{slide.Title}}
  </span>
</li>

setActive()是：

$scope.setActive = function(id)
{
    $scope.currentIndex = id;
}

当我单击List Items我更新图像时：

<img id="slide" ng-src="resources/slides/slide{{currentIndex + 1}}.jpg" />

一切正常

什么不工作是我有一个视频播放器，在某些时候time我需要更新$scope.currentIndex

我认为这会很好：

player.addEventListener("timeupdate", function()
{
    currentTime = player.currentTime;
    angular.forEach($scope.data, function(value, key)
    {
        if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
        {
            console.log("load id:" + key);
            $scope.setActive(key); //Calling what works when I click a listItem
        }
    });
});

提示点处的console.log作品和日志，但是，直到我列出列表后，图像才会更新MouseOver。那时，图像将更新为任何$scope.currentIndex发生的情况。我完全迷失了这一点。有任何想法吗？

4

1 回答 1

4

因为您是在典型的 Angular 执行上下文之外更新模型，所以您需要使用 scope.$apply() 以便 Angular 知道它需要运行 $digest 并可能更新视图。在此处查看有关 $apply 的更多信息：

$rootScope.Scope.$apply

基本上，如果你在 $apply 中包装你对 setActive 的调用，那么 Angular 就会知道它需要更新视图。这应该可以解决问题：

player.addEventListener("timeupdate", function()
{
    currentTime = player.currentTime;
    angular.forEach($scope.data, function(value, key)
    {
        if (currentTime >= $scope.data[key].time && currentTime <= $scope.data[key].time + 0.3 && $scope.currentIndex != key)
        {
            console.log("load id:" + key);

            // Wrap the call in $apply so Angular knows to call $digest
            $scope.$apply(function() {
                $scope.setActive(key);
            });
        }
    });
});
于 2013-03-11T23:32:02.980 回答