如何使用ajax加载程序和ui引导angularjs加载视频

我想要一个ajax加载程序，直到每个视频加载完毕，我不知道该将加载程序放在哪里，以及何时隐藏和显示它。我使用了ui角引导模式。我使用了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>

---

我有同样的问题，似乎你没有提出视频请求，因为hall_视频阵列已经存在，你正在迭代它。因此，请为iframe和img标记使用z索引

<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都会堆叠在视频后面，在大多数情况下都有效。祝你一切顺利

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