Javascript 纯JS中的Angular ng hide指令

在AngularJS中，可以使用

ng hide

隐藏HTML元素。如何使用纯JS/jQuery实现这一点？如果您有类似于

的内容，是

$（“#userNotLoggedIn”）.hide（）

还是

$（“#userNotLoggedIn”）.remove（）

，还是其他内容？目标是不允许站点访问者在未以用户身份登录时查看页面。

如果您希望实际复制ng hide，则可以使用jQuery.addClass方法

ngHide只是监视绑定到它的模型值，并因此添加/删除ng hide类。这个类只是添加了一个css规则“display:none”，将元素隐藏起来

然而，将其用于基于身份验证的角色通常不是一个好主意。您可以简单地使它不可见，但它仍然在DOM中，因此可以访问

$('#userNotLoggedIn').css('display', 'none');

.myHideClass {
   display: none;
}

$(`#userNotLoggedIn`).addClass('myhideClass');
$(`#userNotLoggedIn`).removeClass('myhideClass');

也许吧

但如果您希望能够应用并撤消它，我建议将

display:none

放在它自己的类中，可以随意放置和删除

差不多

$('#userNotLoggedIn').css('display', 'none');

.myHideClass {
   display: none;
}

$(`#userNotLoggedIn`).addClass('myhideClass');
$(`#userNotLoggedIn`).removeClass('myhideClass');

现在，当您执行任何逻辑时，您必须查看它们是否已登录，当它们登录时，什么也不做。如果他们没有登录，在登录后添加

myHideClass

，删除

myHideClass

编辑：

但有一个问题，我很确定

display:none仍将使您的元素在DOM中可见

Angular有一个
ng，如果
attr，您可以放置标签并绑定到布尔值。如
ng if=“userIsLoggedIn”
其中
userIsLoggedIn
是控制器中的一个布尔值，设置为
true
或
false

在dom中，
userIsLoggedIn
为true时，元素及其所有内容都在dom中，但是；如果
userIsLoggedIn===false
那么在dom中，如果您检查它，您的div将不可见

您将在dom中看到的是
，一旦布尔值变为true，则注释的html行将变成所有实际的html
 
ng hide
可能更等同于。不确定为什么要提起angular。您的问题是如何隐藏HTML元素？您是否阅读了
隐藏
和
删除
的文档？你不确定他们在做什么吗？在这种情况下隐藏一个元素不是正确的解决方案，将导航限制到该页面，而不是使用jsthanker@mikemcaughan和Rahul。Rahul，你是说限制导航到那个页面。你将如何做到这一点？您是在客户端还是服务器端实现该逻辑？
ng hide
添加CSS以使元素不可见
ng if
决定是否实际将元素添加到DOM中。然而，正如@RahulArora所说，你应该限制页面的导航。太棒了。这基本上就是我想说的。将其用于身份验证目的。你打算怎么做呢？我想它应该是JS逻辑，而不是CSS
hide
或
show
。我不希望从DOM访问信息。如果此页面包含一些敏感信息，那么这些信息首先不应该从服务器中传出。否则，即使您执行window.location重定向以阻止用户访问该页面（完全取决于您的应用程序），也没有关系。这完全取决于您的堆栈、使用的框架等。我认为您问了一个错误的问题。这个问题的答案是我发布的（顺便说一句，你可能想将其标记为已接受）。如果你找不到，可以在谷歌上搜索或者发布一个新的、措辞更好的问题。我打赌会有很多这样的人。再次感谢你的反馈。这实际上是我第二次尝试问这个问题。我想我没有问错问题。我的第一次尝试要详细得多，但有些人不喜欢。我只是想弄清楚如何阻止未经验证的用户查看某些页面
ng hide
只是在CSS中显示：none
，这不是我想要的
ng如果
听起来像答案。顺便说一下，如果页面包含敏感信息，而您说它不应该来自服务器，那么它应该来自哪里？非常有用。谢谢这些答案有助于澄清我的目的。对于这个特殊的情况，我认为
ng if
是我的目标，因为我不希望DOM中出现任何东西。与
ng if
等价的JS是否只是一个常规的
if
语句？@Farid由于ng if引起的DOM操作量，JS等价物可能相当复杂。或者至少包含很多jquery，这些代码在将来很难维护。通常，您希望找到一个第三方库来执行繁重的DOM操作，而不是创建自己的内部方法。而if语句可以用来观察布尔值，以确定是否需要执行某些操作，就像ng if一样。要完成所有必要的DOM操作逻辑，您需要编写比iif语句多得多的代码。我有点担心会出现这种情况（这可能就是Angular如此流行的原因）。现在，我的目标是使用纯JS来完成所有客户端逻辑，而不是使用框架（我不喜欢JS社区中的“每月口味”问题）。作为一个新开发人员，这应该有助于我的JS技能。顺便说一句，我真的很感谢你的解释，也感谢你没有让我因为问了一些可能没有完全意义的问题而感到愚蠢，所以谢谢。我不知道这是否会对你有多大帮助，但这里是ng if指令的源代码。我可以理解想要采用全JS方法，但我要说的是。框架在这里100%是为了让我们的编码生活更简单、更好。框架使维护未来代码1000x变得更容易。为了学习体验