0

I'm using ng-videosharing-embed. This directive creates an iFrame depending of video url.

But as Youtube video has cat_sender.js issue which is slowing down the page load. I decided to embed on fly the <embed-video> tag by clicking on video thumbnail image.

This video tag looks as following:

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

I tried two easy solutions ng-if and ng-show but:

  1. ng-if does not work as expected. The DOM stay empty where it should show the video.
  2. ng-show works to show the video instead of the thumbnail. But as it is loaded at beginning, this solution does not solve the load issue.

Then I tried to use some on-fly injection with

  1. angular.element( '#' + myThumbnailID ).after( '<embed-video...></embed-video>'). But in that case the <embed-video> directive does not get evaluated.

Sounds I'm missing something important concept in angular. I'm sure there is an easy way to process.

Do you know a way:

  • to force ng-if to work
  • or to evaluate the injected code
  • or something smarter

the view with simple 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>

the view with simple ng-if and no loop to avoid multi usage of 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>
Community
  • 1
  • 1
mickro
  • 881
  • 2
  • 11
  • 26
  • The easiest solution would be to set `href` dynamically. Since you don't show us your code it's hard to say why `ngIf` doesn't work in your case. – a better oliver Oct 28 '15 at 16:41
  • Sure I can show more code. I though I was clear enough as it. But when I see your comment I understand I m not at all. A dynamic `href` is not the point. It is all about to evaluate dynamically a directive. – mickro Oct 28 '15 at 21:34
  • possibly related: https://github.com/angular/angular.js/issues/339 – Claies Oct 28 '15 at 21:44
  • thanks @Claies but all `href` or `ng-src` in my case are going well. – mickro Oct 28 '15 at 21:46
  • But the code behind `` managed by `ng-if` does not appear when the condition is true. – mickro Oct 28 '15 at 21:48
  • 1
    `ngIf` creates a new scope. You might try something like `player.enable` (mind the dot) instead of `enablePlayer`. Or use the `controller as` syntax with `ngController`. – a better oliver Oct 28 '15 at 22:04
  • 1
    you don't just have a single `enablePlayer` instance here, you have as many instances of `enablePlayer` as you have `videos`. Therefore, it would be impossible for your outer controller to know which video you want to show the player for. You can either provide an outer variable that would manage all the players at the same time, or make `video` an object with `href` and `enable` options, to track the visibility of each player individually. – Claies Oct 28 '15 at 22:17
  • Thanks @zeroflagL, isolated scope was the main point. – mickro Oct 29 '15 at 08:28
  • Thanks @Claies, your remark about many usage of same variable. That helps me to focus on more quality. But it was not the bug which was make all thing not working. The second example works as the same. – mickro Oct 29 '15 at 08:32

1 Answers1

0

Considering @zeroflagL and @Claies remarks, solution looks as:

<!-- 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>
mickro
  • 881
  • 2
  • 11
  • 26