How to use ajax loader with ui bootstrap angularjs for loading videos

Question

I want a ajax loader untill each individual video gets loaded, I am not getting where to put that loader, and when to hide and show it. I have used ui angular bootstrap modal. I have used ng-hide but I have seen the value for ng-hide is not getting passed. Here I have my html code

<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="container">


<ul class="list-unstyled video-list-thumbs col-md-8">
  <li class="col-md-5"  ng-repeat = "video in hall_videos">
  <h5>Video Name: {{video.video_name}}</h5>
  <div ng-hide="toggle" class="loading-spiner-holder" loading >
    <div class="loading-spiner"><img ng-model="viewLoading" src="<?=base_url()?>assets1/images/ajax-loader.gif" style="margin-top:85;margin-bottom:65"/>
  </div>
  </div>

    <a href="#" title="Video of {{hall_videos[0].hall_name}}">
      <iframe  allowfullscreen="true"  webkitallowfullscreen="true" mozallowfullscreen="true" id="player" type="text/html" width="200" height="200"
       src="https://www.youtube.com/embed/{{video.video_code}}" frameborder="2"></iframe>

    </a>

  </li>
</ul>

</div></div>

Here I have my modal code in js code as

    $scope.open = function (size, id) {
      $scope.hall_videos = hall_videos;
    $scope.toggle=false;
      var modalInstance = $modal.open({
      templateUrl: 'video_gallery.html',
      controller: HomeCtrl1,
      size: size,
      resolve:{
                videos: function () {
                var videos = [];

                angular.forEach($scope.hall_videos, function(video) {
                  if (video.hall_info_id === id) {
                    videos.push(video);
                  }
                });
$scope.toggle=true;
                  return videos;
                }
              }
    });
    };
    // Please note that $modalInstance represents a modal window (instance) dependency.
    // It is not the same as the $modal service used above.
    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');
      };
    };

score 0 · Accepted Answer · answered Apr 06 '15 at 16:38

I had the same issue seems like you are not making request for videos, as hall_videos array already present and you are iterating over it. So kindly make use of z-index for iframe and img tag.

<ul class="list-unstyled video-list-thumbs col-md-8">
  <li class="col-md-5"  ng-repeat = "video in hall_videos">
  <h5>Video Name: {{video.video_name}}</h5>
  <div ng-hide="toggle" class="loading-spiner-holder" loading >
    <div class="loading-spiner"><img style="z-index:0;position:relative" ng-model="viewLoading" src="<?=base_url()?>assets1/images/ajax-loader.gif" style="margin-top:85;margin-bottom:65"/>
  </div>
  </div>

    <a href="#" title="Video of {{hall_videos[0].hall_name}}" style="z-index:1;position:relative">
      <iframe  allowfullscreen="true"  webkitallowfullscreen="true" mozallowfullscreen="true" id="player" type="text/html" width="200" height="200"
       src="https://www.youtube.com/embed/{{video.video_code}}" frameborder="2"></iframe>

    </a>

  </li>
</ul>

Keep z-index of img tag is less your iframe div so that whenever video gets loaded the loading div will be stacked behind the video, it works in most cases. All the best.

How to use ajax loader with ui bootstrap angularjs for loading videos

1 Answers1