AngularJS，接口不更新預期

Question

我有一個無序列表，並在每個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的I需要更新$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恰巧。我完全失去了這一點。有任何想法嗎？

Answer 1

由於您在典型的Angular執行上下文之外更新模型，因此需要使用scope $ apply（），以便Angular知道它需要運行$ digest並可能更新視圖。查看更多有關$應用在這裏：

$rootScope.Scope.$apply

基本上，如果你換您的來電SETACTIVE在$應用，則角就會知道，它需要更新視圖。這應該是訣竅：

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