2015-04-04 54 views
0

我想要一个ajax加载程序,直到每个单独的视频获取加载,我没有得到该加载程序的位置,以及何时隐藏和显示它。我已经使用了ui角引导模式。我已经使用了ng-hide,但我已经看到ng-hide的价值没有得到通过。 在这里,我有我的html代码如何使用ajax加载程序与ui bootstrap angularjs加载视频

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

回答

0

我有同样的问题,好像你是不是做了视频请求,如hall_videos阵列已经目前,你正在迭代它。所以请好好利用z-index for iframe和img标签。

<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将堆放在视频后面,它在大多数情况下。祝一切顺利。