Angular ng-show 和 ng-hide 和 ng-if 没有按预期工作

Question

在我的应用程序中，当我为文章做ng-repeat 时，用户点击我想隐藏和显示一些元素。为此，我使用videoPlaying[$index]，它适用于所有具有ng-hide 的元素，但对于具有ng-show 的iframe，它没有按预期工作，在chrome 控制台中，我可以看到@当我点击播放视频时，987654326@ 得到ng-hide 类。视频开始播放，但类别错误。 我也尝试过使用 ng-if，然后 hide 和 show 工作正常，但视频无法正常工作，这很奇怪，因为当我有 ng-show 时视频可以工作，并且使用 ng-if 我得到控制台错误：

无法读取未定义的属性“playVideo”

不确定如何解决？

我的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>

我的控制器：

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

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

更新

我已经尝试过 Dinesh 的建议，它在文章页面上有效，但是当我在文章页面上有它时，同样的逻辑，当我只有一个视频并且我不需要滑块，但是当我有滑块时它正在工作，我已经在 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>

我的文章控制器：

$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>

控制器：

$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]"

Answer 2

尝试用"ng-if"替换它，视频元素上"ng-show"可以应用于子元素