Javascript 在angular ui引导模式中添加Ajax加载程序
我有ui引导模式来播放视频,这些视频需要时间加载,所以我想在视频加载之前显示ajax加载程序 这是我的ng模板和modal的angular js代码,我已经添加了ajax加载程序,但我不知道如何停止加载。我想在视频完全加载后停止加载。谢谢Javascript 在angular ui引导模式中添加Ajax加载程序,javascript,angularjs,angular-ui,angular-ui-bootstrap,Javascript,Angularjs,Angular Ui,Angular Ui Bootstrap,我有ui引导模式来播放视频,这些视频需要时间加载,所以我想在视频加载之前显示ajax加载程序 这是我的ng模板和modal的angular js代码,我已经添加了ajax加载程序,但我不知道如何停止加载。我想在视频完全加载后停止加载。谢谢 <script type="text/ng-template" id="video_gallery.html"> <div class="modal-content col-md-12" > <div class="
<script type="text/ng-template" id="video_gallery.html">
<div class="modal-content col-md-12" >
<div class="modal-header">
<h4 class="modal-title" style="text-align:center;">Videos of {{hall_videos[0].hall_name}} Hall</h4>
</div>
<div class="modal-body " >
<div ng-if="hall_videos==0">
<h4 style="font-weight:bold;font-family:Bitstream Charter;">Sorry! No Videos Found to Display.</h4>
</div>
<div class="col-md-4 col-md-offset-0" ng-repeat = "video in hall_videos" class="col-md-8">
<h5>Video Name: {{video.video_name}}</h5>
<div>
<img id="spn" ng-src="<?=base_url()?>images/ajax-loader.gif" style="position: absolute;left: 35%;top: 45%;"></img>
<iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" id="player" type="text/html" width="200" height="200"
src="//www.youtube.com/embed/{{video.video_code}}" frameborder="2">
</iframe>
</div>
</div>
</div>
<div class="col-md-12"><br><br></div>
</div>
<div class="modal-footer"><br>
<div class=" ">
<a href="<?=base_url()?>hall/calender/{{hall_videos[0].hall_info_id}}"><button class='btn btn-success'>Book Now</button></a>
<button class="btn btn-warning" ng-click="cancel()">cancel</button>
</div>
</div>
</script>
这和情态动词有关吗?或者更确切地说是iFrame和它们的src属性?对不起,先生,我不明白你的意思。事实上,我是新手。我得到了ajax加载程序img(旋转),但当视频完全加载时,img仍在旋转,所以在请求的视频完全加载后,是否有隐藏或关闭它的想法?您可以尝试使用onload(或jQuery load)在iframe上隐藏ajax指示器。我尝试过使用JQuery,但不起作用,先生。你尝试过使用blockUI吗
$scope.open = function (size, id) {
$scope.hall_videos = hall_videos;
var modalInstance = $modal.open({
templateUrl: 'video_gallery.html',
controller: HomeCtrl1,
size: size,
backdrop: true,
resolve: {
videos: function () {
var videos = [];
angular.forEach($scope.hall_videos, function(video) {
if (video.hall_info_id === id) {
videos.push(video);
}
});
return videos;
}
}
});
};
var HomeCtrl1 = function ($scope, $modalInstance, videos) {
$scope.hall_videos = videos;
$scope.selected = {
hall_videos: $scope.hall_videos
};
$scope.ok = function () {
$modalInstance.close($scope.selected.hall_videos);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};