html5 - Angular ng-show/ng-hide/ng-if 隐藏video标签，刷新瞬间显示bug

问题描述

问 题

使用Angular框架时，用ng-show/ng-hide/ng-if指令判断是否有视频链接，如果有则显示video标签，没有则隐藏，但是，当没有video被隐藏是，每次刷新瞬间都会显示然后再隐藏。不知道有没有人遇到跟我一样问题。
代码如下：

<div class="news-content" ng-if="news.video_url != ''">
      <video ng-src="{{ news.video_url }}" preload="auto" controls width="100%" webkit-playsinline></video>
</div>

解决方案

感谢上面各位的回答，发现还是不能把video标签放到模板中，不然刷新的时候总会一瞬间看到视频的控制按钮，
问题已经解决了，方法如下：
模板中html修改为：

<div class="news-content"  ng-bind-html="video_dom">
</div>

然后在controller中去生成dom结构

$scope.video_dom = '';
if (response.data.video_url) {
  $scope.video_dom = $sce.trustAsHtml('<video src="' + response.data.video_url + '" preload="auto" controls width="100%" webkit-playsinline></video>');
}

这篇关于html5 - Angular ng-show/ng-hide/ng-if 隐藏video标签，刷新瞬间显示bug的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！