Question

我是AngularJs的新手。我用angularJS模板制作了网站。

一切正常但是，点击并加载一些页面内容后，我出现了闪烁的屏幕问题。我在header中包含了angular.min.js.

如何解决闪烁问题？

HTML - 这是我的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>MYAPP</title>

    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />


    <script src="https://use.fontawesome.com/81204b271a.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/angular-animate.js"></script>
    <script src="js/angular-css.min.js"></script>
    <script src="js/app.js"></script>


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

  </head>

  <body ng-app="myapp" ng-cloak>
    <!-- VIEWS-->
    <div class="page {{ pageClass }}" ng-view=""></div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript" src="js/slick.min.js"></script>
    <script src="js/wow.min.js"></script>
    <script>
         new WOW().init();
    </script>

  </body>
</html>

Answer 1

您可能正在寻找ng-cloak。我已经使用了它，它减轻了我的隐藏真实性问题。

https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

在角度js根元素（ag-app）处添加ng-cloak。只有在角度符合DOM元素（Angular扩展HTML属性）后，才会在屏幕上显示视图

如何阻止angularJs闪烁的屏幕

2 个答案: