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

yugasun
  • 328

使用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>
回复
阅读 5.9k
4 个回答
✓ 已被采纳

感谢上面各位的回答,发现还是不能把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>');
}

先引入这段CSS,内容可以在angular文件当中的angular-csp.css找到

<style>
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
        display: none !important;
    }
</style>

然后加上这个指令ng-cloak

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

一点建议,你可以试试将ng-ifng-show替代,因为ng-if牵扯DOM的移除和添加,而ng-show则会让那个元素一直保持在文档中;如果你一定要使用ng-if的话,可以考虑使用动画将这个小缺陷弥补一下。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏