Question

我想要一个ajax加载器，直到每个单独的视频都被加载，我没有得到放置该加载器的位置，以及何时隐藏和显示它。我用过ui angular bootstrap模态。我使用过ng-hide但我已经看到ng-hide的值没有通过。这里我有我的HTML代码

<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>

这里我的js代码中的模态代码为

    $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');
      };
    };

Answer 1

我有同样的问题似乎你没有提出视频请求，因为hall_videos数组已经存在并且你正在迭代它。所以请为iframe和img标签使用z-index。

<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>

保持img标签的z-index少于你的iframe div，这样每当加载视频时，加载div将堆叠在视频后面，它在大多数情况下都有效。一切顺利。

如何使用带有ui bootstrap angularjs的ajax loader来加载视频

1 个答案: