javascript - angular ng-show和ng-hide和ng-if如预期无法正常工作

在我的应用程序中，当我为文章做ng-repeat时，在用户上单击“我要隐藏并显示一些元素”。为此，我正在使用videoPlaying[$index]，并且对于具有ng-hide的所有元素都可以正常工作，但是对于具有iframe的ng-show，它不能按预期方式工作，在chrome控制台中，我可以看到单击播放视频时获得iframe类别。视频开始播放，但是类别错误。我也尝试了ng-if，然后隐藏和显示效果很好，但是视频无法正常工作，这很奇怪，因为当我进行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-hide，它的元素将被隐藏并按原样显示，但是视频并没有像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(); }; (adsbygoogle = window.adsbygoogle || []).push({}); 最佳答案 只是做一件事。更换ng-show="videoPlaying[$index]"与ng-show="!videoPlaying[$index]" (adsbygoogle = window.adsbygoogle || []).push({});