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

Question

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

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

Answer 1

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

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

然后在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>');
}

Answer 2

先引入这段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

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

Answer 3

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

Answer 4

http://stackoverflow.com/a/31797313/2586541