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

Thank you for your answers above. I found that you still cannot put the video tag into the template, otherwise you will always see the video control button when refreshing.
The problem has been solved. The method is as follows:
Template The Chinese html is modified to:

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

Then generate the dom structure in the controller

$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

First introduce this CSS, the content can be found in angular-csp.css in the angular file

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

Then add this command 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

A little suggestion, you can try replacing ng-if with ng-show, because ng-if involves the removal and addition of DOM, and ng-show will keep that element in the document; if If you must use ng-if, you can consider using animation to make up for this small flaw.

Answer 4

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