Question

在我的应用中，当我为文章做videoPlaying[$index]时，在用户点击我想要隐藏并显示一些元素。为此，我使用的是ng-hide，它适用于所有iframe元素，但对于ng-show iframe，ng-hide没有按预期工作， Chrome控制台，当我点击播放视频时，我可以看到<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(); };课程。视频开始播放，但它有错误的课程。我已尝试使用ng-if，然后隐藏和显示工作正常，但视频将无法正常工作，这很奇怪，因为视频在我有ng-show时工作，并且使用ng - 如果我收到控制台错误：

无法读取未定义的属性'playVideo'

不确定如何解决这个问题？

我的HTML：

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

我的控制器：

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

更新

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

当我有：

ng-if

有了这个，点击后，我可以在控制台中看到它有不应该有的ng-hide类。

如果我这样：

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

然后它按预期运行并显示在图像的正下方，我不想这样做。

如果我使用的是 <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>  <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>，那么元素会被隐藏并显示为应该存在，但视频不会像ng-show一样启动，就像它应该的那样！

$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();
  };

文章页面（工作地点）：

$arr = explode(':', $string);
array_pop($arr);
echo implode(':', $arr);  // Clothing, Shoes & Accessories:Men's Clothing

控制器：

   If(null!=fragment)
   fragment=null;
   switch(currentFragment){
   case A:
    fragment = new FragmentA();
    break;
    case B:
   fragment= new FragmentB();
   break;}
    fragmentTransaction.replace(R.id.frame_layout, fragment);
    fragmentTransaction.commit();
    Toast.makeText(this, String.valueOf(s), Toast.LENGTH_LONG).show();

Answer 1

做一件事。

替换

ng-show="videoPlaying[$index]"

带

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

Answer 2

尝试将"ng-if"替换为"ng-show"，视频元素eb create --help可以应用于子元素

角度ng-show和ng-hide和ng-如果不按预期工作

2 个答案: