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

基本的に、setActiveへの呼び出しを$ applyでラップすると、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 に答える