Question

所以我在登录页面上试图隐藏导航栏。我将导航栏放在nav元素中，并在元素中添加“ng-if”，仅在用户位于应用程序（而不是登录页面）时才进行渲染。

<!DOCTYPE html>
<html lang="en" ng-app="demoapp">
<head>
    <!-- Angular & jQuery -->
    <script src="js/jquery-3.2.0.min.js"></script><!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><!-- load angular -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script><!-- load ngRoute -->
</head>
<body>
    <nav ng-if=false>
    /... nav elements inside here
    </nav>

    <!-- to load ngRoute-->
    <div ng-view></div>
</body>

但是当我登录页面时，导航栏仍会显示一秒钟，然后消失。它为什么这样做？我该如何阻止它？

Answer 1

根据AngularJS文档＆＃34; ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式简要显示AngularJS html模板。使用此指令可避免由html模板显示引起的不良闪烁效应。

该指令可以应用于元素，但首选用法是将多个ngCloak指令应用于页面的一小部分，以允许逐步呈现浏览器视图。＆＃34;

请参阅https://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

这是ngCloak的用途：

<nav ng-cloak ng-if=false>
/... nav elements inside here
</nav>

Answer 3

将ng-cloak添加到您的body代码中，这样可以防止附加了ng-if属性的所有元素出现故障。

即使ng-if在角度为false，div也会在几秒内呈现

3 个答案: