視頻加載器時，在社交媒體發佈緩衝（angularJS）

Question

我有一個社交媒體飼料，用戶可以發佈視頻。我希望在使用AngularJS緩衝視頻的同時添加微調器。 這是HTML部分：

<div class="media-list-item col-xs-12" ng-repeat="media in ::videos"> 
    <div class="embed-responsive embed-responsive-16by9"> 
     <video controls oncontextmenu="return false;" 
       class="embed-responsive-item" frameborder="0" allowfullscreen preload="auto" 
       id="{{media.Id}}"> 
      <source ng-src="{{::media.Url | trustAsResourceUrl}}" /> 
     </video> 
     <i class="fa fa-spinner fa-pulse videoLoader" ng-show="media.loading" aria-hidden="true"></i> 
    </div> 
</div> 

這是我的腳本：

for (var i = 0; i < scope.videos.length; i++) { 
var video = scope.videos[i]; 
video.loading = false; 
var videoElement = angular.element(document.getElementById(video.Id))[0]; 

videoElement.onplaying = function() { 
    video.loading = false; 
    scope.$apply(); 
}; 

videoElement.onwaiting = function() { 
    video.loading = true; 
    scope.$apply(); 
}; 

}

所以我加載從媒體的視頻，並設置了 '裝載' 參數去觸發每個獨立媒體（視頻）的ng顯示，所以當視頻「等待」（緩衝）時，它應該顯示微調，當它顯示時隱藏它。 只要我在特定的帖子中只有一個視頻，它就可以完美運行，但只要有一個帖子中有多個視頻，微調只會顯示在最後一個視頻上。任何幫助讚賞。

Answer 1

問題是，內部函數（事件處理程序）引用相同的視頻變量，並在通話時它等於最後一個視頻項目。要解決這個問題，你應該將視頻變量聲明的循環體範圍隔離出來。您可以使用IIFE，forEach等就個人而言，我會建議你使用.bind改變範圍方面：

for (var i = 0; i < scope.videos.length; i++) { 
    var video = scope.videos[i]; 
    video.loading = false; 
    var videoElement = angular.element(document.getElementById(video.Id))[0]; 

    videoElement.onplaying = function (video) { 
     video.loading = false; 
     scope.$apply(); 
    }.bind(this, video); 

    videoElement.onwaiting = function (video) { 
     video.loading = true; 
     scope.$apply(); 
    }.bind(this, video); 
} 

Answer 2

只是這裏要注意，幾個小時的研究後，另一種解決方案，這是分開封裝在另一個功能功能，根據THIS回答：

for (var i = 0; i < scope.videos.length; i++) { 
var video = scope.videos[i]; 
video.loading = false; 

var videoElement = angular.element(document.getElementById(video.Id)); 
videoElement.on('playing', videoOnPlaying(video)); 
videoElement.on('waiting', videoOnWaiting(video)); 

function videoOnPlaying(video) { 
return function() { 
    video.loading = false; 
    scope.$apply(); 
}; } 

function videoOnWaiting(video) { 
return function() { 
    video.loading = true; 
    scope.$apply(); 
}; } }