时间戳

首页 > 解决方案 > 条件更改为 true 后，ng-show 不显示

javascript - 条件更改为 true 后，ng-show 不显示

问题描述

我的 HTML 中有一张图片和一个 YouTube 视频。当视频不播放时，我只想显示图像，当它播放时，我只想显示视频。
当页面打开时，仅加载图像（如预期的那样）并且单击播放按钮时图像消失但视频未显示。如果我删除视频元素的 ng-show 视频可以工作，但问题是它在页面加载时也出现在图像中（它不应该）。对于 YouTube 视频，我使用的是 angular-youtube-mb 1.3.2 版本。

HTML

    <div class="video-wrapper">
        <div class="video">
            <img ng-if="!homewelcomeVM.playing && !homewelcomeVM.paused" ng-src="ommited.jpg">
            {{homewelcomeVM.playing}}
            <youtube-video ng-show="homewelcomeVM.playing" video-url="homewelcomeVM.youtubeUrl" player="homePlayer" player-vars="playerVars" player-width="'100%'" player-height="'100%'"></youtube-video>
        </div>
    </div>
    <div class="blck-cnt animate-fade" ng-show="!homewelcomeVM.playing || homewelcomeVM.paused"> 
        <button type="button" class="play play-lg" hvm-analytics-clicks hvm-where-is="'home'" hvm-action="::'CLICK_PLAY_HOME_VIDEO'" ng-click="homePlayer.playVideo()"><i class="ic-svg ic-play-arrow ic-light ic-36"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ic-play-arrow"></use></svg></i></i></button>
    </div>

按下播放按钮时，控制点 {{homewelcomeVM.playing}} 正确更新为 true。

控制器

        $scope.$on('youtube.player.playing', function ($event, player) {
            vm.playing = true;
            vm.paused = false;
        });

为什么当控制器变量更改为 true 时视频没有出现？

标签： javascripthtmlangularjs

解决方案

您可以添加div为youtube-video标签的父级并ng-show用于div标签：

<div class="video-wrapper">
    <div class="video">
        <img ng-if="!homewelcomeVM.playing && !homewelcomeVM.paused" ng-src="ommited.jpg">
        {{homewelcomeVM.playing}}
        <div ng-show="homewelcomeVM.playing">
            <youtube-video  video-url="homewelcomeVM.youtubeUrl" player="homePlayer" player-vars="playerVars" player-width="'100%'" player-height="'100%'"></youtube-video>
        </div>
    </div>
</div>
<div class="blck-cnt animate-fade" ng-show="!homewelcomeVM.playing || homewelcomeVM.paused">
    <button type="button" class="play play-lg" hvm-analytics-clicks hvm-where-is="'home'" hvm-action="::'CLICK_PLAY_HOME_VIDEO'" ng-click="homePlayer.playVideo()"><i class="ic-svg ic-play-arrow ic-light ic-36"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#ic-play-arrow"></use></svg></i></i></button>
</div>

推荐阅读