Question

我正在使用ng-videosharing-embed。该指令根据视频网址创建iFrame。

但是，由于Youtube视频的cat_sender.js issue正在减慢页面加载速度。我决定通过点击视频缩略图来嵌入<embed-video>标记。

此视频标记如下所示：

<embed-video href="https://www.youtube.com/watch?v=f2X_Nwqb7IA" width="100%" height="300px"></embed-video>

我尝试了两个简单的解决方案ng-if和ng-show，但是：

ng-if无效。在显示视频的地方，DOM保持空白。
ng-show用于显示视频而非缩略图。但是在开始加载时，此解决方案无法解决负载问题。

然后我尝试使用一些动态注射

angular.element( '#' + myThumbnailID ).after( '<embed-video...></embed-video>')。但在这种情况下，<embed-video>指令不会被评估。

听起来我错过了一些重要的角度概念。我确信有一种简单的方法可以处理。

你知道吗：

强制ng-if开始工作
或评估注入的代码
或更聪明的东西

简单ng-if

<!-- language: lang-js -->
<carousel id="{{ carouselId  }}" interval="interval" no-wrap="noWrap">
 <slide ng-repeat="video in videos">
  <img ng-if="!enablePlayer" id='{{ getThumbnailId( $index ) }}'  style="margin:auto;" height="300px" class="clickable" ng-click="enablePlayer = true" ng-src="{{ findThumbnail( video ) }}">
  <embed-video ng-if="enablePlayer" href="{{ video }}" width="100%" height="300px"></embed-video>
  <div class="carousel-caption"></div>
 </slide>
</carousel>

简单的ng-if和no循环视图，以避免多次使用enablePlayer

<!-- language: lang-js -->
<img ng-if="!enablePlayer" id='{{ getThumbnailId( 0 ) }}'  style="margin:auto;" height="300px" class="clickable" ng-click="enablePlayer = true" ng-src="{{ findThumbnail( videos[0] ) }}">
<embed-video ng-if="enablePlayer" href="{{ videos[0] }}" width="100%" height="300px"></embed-video>

Answer 1

考虑@zeroflagL和@Claies评论，解决方案如下：

<!-- language: lang-js -->
<div ng-controller="CarouselMediaController as controller">
  <carousel id="{{ carouselId  }}" interval="interval" no-wrap="noWrap">
   <slide ng-repeat="video in videos">
    <img ng-if="!controller.enablePlayer[ $index ]" id='{{ getThumbnailId( $index ) }}'  style="margin:auto;" height="300px" class="clickable" ng-click="controller.enablePlayer[ $index ] = true" ng-src="{{ findThumbnail( video ) }}">
    <embed-video ng-if="controller.enablePlayer[ $index ]" href="{{ video }}" width="100%" height="300px"></embed-video>
    <div class="carousel-caption"></div>
   </slide>
  </carousel>
</div>

在飞行中嵌入角度指令

1 个答案: