视频加载器时，在社交媒体发布缓冲（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(); 
}; } }