javascript - Angular ng-show、ng-hide 和 ng-if 未按预期工作

Question

在我的应用程序中，当我对文章进行 ng-repeat 时，用户单击“我想隐藏并显示一些元素”。为此，我使用的是 videoPlaying[$index]，它对于所有具有 ng-hide 的元素都可以正常工作，但对于 iframe 来说有 ng-show 它没有按预期工作，在 chrome 控制台中，我可以看到当我单击时 iframe 获取 ng-hide 类播放视频。视频开始播放，但类别错误。我也尝试过使用 ng-if ，然后隐藏和显示工作正常，但视频不起作用，这很奇怪，因为当我有 ng-show 时视频可以工作，而使用 ng-if 我收到控制台错误:

Cannot read property 'playVideo' of undefined

不知道如何解决这个问题？

我的html:

<div ng-if="slider.length == 0 && article.external_media.length == 1">
  <img ng-hide="videoPlaying" ng-src="http://i1.ytimg.com/vi/{{ article.external_media[0].video_id }}/maxresdefault.jpg" class="cover">
  <youtube-video ng-show="videoPlaying" video-url="article.external_media[0].original_url" player="youtubePlayer" player-vars="playerVars" class="video"></youtube-video>
  <div ng-hide="videoPlaying" class="iframe-overlay" ng-click="playVideo(youtubePlayer)">
    <img ng-hide="videoPlaying" ng-click="playVideo(youtubePlayer)" class="play" src="icons/play.svg"/>
    <img ng-hide="videoPlaying" ng-click="playVideo(youtubePlayer)" class="playButton" src="icons/playRectangle.svg"/>
  </div>
</div>

我的 Controller :

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

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

更新

我已经尝试过 Dinesh 建议，它在文章页面上有效，但是当我在文章页面上使用它时，相同的逻辑，当我只有一个视频并且不需要一个视频时，它不起作用 slider ，但是当我有 slider 时它就可以工作，我已经在 html 代码中评论了正在工作和不工作的部分，不知道为什么以及如何解决这个问题？

当我有:

<youtube-video ng-show="videoPlaying" video-url="article.external_media[0].original_url" player="youtubePlayer" player-vars="playerVars" class="video"></youtube-video>

这样，单击后，我可以在控制台中看到它具有不应具有的 ng-hide 类。

如果我有这样的:

<youtube-video ng-show="!videoPlaying" video-url="article.external_media[0].original_url" player="youtubePlayer" player-vars="playerVars" class="video"></youtube-video>

然后它的行为符合预期，并立即显示在图像下方，但我不想这样做。

如果我使用 ng-if ，那么元素会被隐藏并按应有的方式显示，但视频不会像 ng-show 那样开始，就像它应该的那样!

<youtube-video ng-if="videoPlaying" video-url="article.external_media[0].original_url" player="youtubePlayer" player-vars="playerVars" class="video"></youtube-video>

这是文章页面的一部分(不起作用的部分):

  <!-- this part is not working -->
  <img ng-hide="videoPlaying" ng-src="http://i1.ytimg.com/vi/{{ article.external_media[0].video_id }}/maxresdefault.jpg" class="cover">
  <youtube-video ng-show="videoPlaying" video-url="article.external_media[0].original_url" player="youtubePlayer" player-vars="playerVars" class="video"></youtube-video>
  <div ng-hide="videoPlaying" class="iframe-overlay" ng-click="playVideo(youtubePlayer)">
    <img ng-hide="videoPlaying" class="play" src="icons/play.svg"/>
    <img ng-hide="videoPlaying" class="playButton" src="icons/playRectangle.svg"/>
  </div>

    <!-- this part works -->
    <ion-slides ng-if="slider.length > 0" class="slides">
      <ion-slide-page ng-repeat="item in slider">
        <img ng-if="item.image" ng-src="{{ fileServer }}/imagecache/cover/{{ item.image }}" class="cover">
        <div class="iframe" ng-if="item.video">
          <img ng-hide="videoPlaying" ng-src="http://i1.ytimg.com/vi/{{ item.video.video_id }}/maxresdefault.jpg" class="cover">
          <youtube-video ng-show="!videoPlaying" video-url="article.external_media[0].original_url" player="youtubePlayer" player-vars="playerVars" class="video"></youtube-video>
          <div ng-hide="videoPlaying" class="iframe-overlay" ng-click="playVideo(youtubePlayer)">
            <img ng-hide="videoPlaying" ng-click="playVideo(youtubePlayer)" class="play" src="icons/play.svg"/>
            <img ng-hide="videoPlaying" ng-click="playVideo(youtubePlayer)" class="playButton" src="icons/playRectangle.svg"/>
          </div>
        </div>
      </ion-slide-page>
    </ion-slides>

我的文章 Controller :

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

  $scope.playVideo = function(youtubePlayer) {
    $scope.videoPlaying = true;
    youtubePlayer.playVideo();
  };

文章页面(工作地点):

<div class="iframe" ng-show="article.external_media.length > 0 && article.external_media.url != ''">
            <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 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"/>
          </div>

Controller :

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

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

Answer 1

只做一件事。

替换

ng-show="videoPlaying[$index]" 

与

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