javascript - 在单页 MEAN 应用程序中优雅地隐藏导航栏。

Question

我有一个应用程序，每个页面上都有一个导航栏，因此我将其分解到继承 self 的layout.jade 文件的index.jade 中。这对于我的应用程序 99% 来说都很好。

它遇到问题的唯一地方是在登录屏幕上，因为在登录屏幕上有一个导航栏感觉很奇怪，所以我使用 Angular 来针对 $rootScope 变量检查 bool 值，并在您位于主页时隐藏导航栏。

这没关系，但导航栏仍然加载一瞬间，然后就消失了。我知道我可以通过不将其分解为单个文件并将其塞入除登录页面之外的每个 Jade 文件中来纠正此问题，但这将是维护的噩梦。

有没有一种方法可以让我的导航栏保持独立状态，使用 ng-hide 将其隐藏在登录屏幕上，并且在登录之前根本不加载。

这是我的代码，让您了解我做了什么。

Controller 检查您是否位于应用程序的根目录(“/”)

angular.module('app').controller('LoginCtrl', function($scope, $http, mvIdentity, mvNotifier, mvAuth, $location, $rootScope) {
  $rootScope.currentPath = $location.path();
 ....
 ....

显示如何使用此变量隐藏导航栏的 jade 文件

block main-content
  section.content

  nav.navbar.navbar-default(ng-hide='currentPath=="/"', role='navigation')
....
....
....

成功登录后，currentPath 变量将设置为 false 以恢复导航栏。

$rootScope.currentPath = false;

我想保留此设置，因为这意味着对导航栏的任何更改都可以在单个文件中进行，并且可以在整个应用程序中继承，从而极大地减少维护，但我希望导航栏等待加载直到登录。与从显示、然后隐藏、然后再次显示闪烁相反。

Answer 1

是的，可以做到这一点。

您看到事情闪现的原因是因为页面在 Angular 引导并应用 ng-hide 之前加载。

有两种方法可以解决这个问题。

1。将脚本文件放在页面的head

中

这是我的首选方法。通过将脚本文件放入 head 元素中，页面在脚本加载之前不会呈现。这意味着 Angular 将首先引导页面，当它渲染时，ng-hide 将被正确应用。

有些人更喜欢页面先开始加载，所以不会使用这种方法，但我个人认为这并不重要。

2。使用ngCloak在您需要隐藏的元素上

基本上，通过将 ngCloak 指令应用于元素，并嵌入链接中提供的样式，您可以隐藏某些元素，直到页面加载后。本质上，ngCloak 所做的就是将 display:none 应用于元素，并在 Angular 完成加载时将其删除。