Marco Marco - 3 months ago 35
AngularJS Question

Angular ng-show not working as expected

In my app, when I am doing

ng-repeat
for articles, on users click I want to hide and show some elements. For that I am using
videoPlaying[$index]
, and it works fine for all the elements that have
ng-hide
, but for
iframe
that has
ng-show
it is not working as expected, in the chrome console, I can see that
iframe
gets
ng-hide
class when I click to play video. Video starts playing but it has the wrong class.
I have tried with ng-if as well, and then hide and show works fine, but the video won't work, which is strange, because video works when I have ng-show, and with ng-if I get the console error:


Cannot read property 'playVideo' of undefined


Not sure how to fix that?

My html:

<img ng-hide="videoPlaying[$index]" class="img" ng-src="http://i1.ytimg.com/vi/{{ article.external_media[0].video_id }}/maxresdefault.jpg">
<youtube-video ng-show="videoPlaying[$index]" video-url="article.external_media[0].original_url" player="youtubePlayer" player-vars="playerVars" class="iframe-video"></youtube-video>
<h1 ng-hide="videoPlaying[$index]">{{ article.title.split(' ', 7).join(' ') }}</h1>
</div>
<div ng-hide="videoPlaying[$index]" class="iframe-overlay" ng-click="playVideo(youtubePlayer, $index)"></div>
<img ng-hide="videoPlaying[$index]" ng-click="playVideo(youtubePlayer, $index)" class="play" src="icons/play.svg"/>
<img ng-hide="videoPlaying[$index]" ng-click="playVideo(youtubePlayer, $index)" class="playButton" src="icons/playRectangle.svg"/>


My controller:

$scope.videoPlaying = [];
$scope.playerVars = {
controls: 0,
showinfo: 0
};

$scope.playVideo = function(youtubePlayer, index) {
$scope.videoPlaying[index] = true;
youtubePlayer.playVideo();
};

Answer

just do one thing.

replace

ng-show="videoPlaying[$index]" 

with

ng-show="!videoPlaying[$index]"
Comments