纯JS中的Angular ng-hide指令

Question

在AngularJS中，您可以使用ng-hide隐藏HTML元素。 您将如何使用纯JS / jQuery执行此操作？ 如果您有类似<div id="userNotLoggedIn"></div> ，它是$("#userNotLoggedIn").hide()还是$("#userNotLoggedIn").remove()或其他东西？ 目的是如果站点访问者未以用户身份登录，则不允许他们访问该页面。

Answer 1

好吧，如果您想实际复制ng-hide，则可以使用jQuery.addClass方法。

ngHide只是监视绑定到其的模型值，因此添加/删除了ng-hide类。 此类仅添加一个CSS规则“ display：none”，将元素隐藏。

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

Answer 2

就像是

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

也许？

但是，如果您希望能够应用并撤消它，我建议您放置display: none在自己的类中display: none可以随意放置和移除的类。

就像是

.myHideClass {
   display: none;
}

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

现在，当您执行任何逻辑时，都必须查看它们是否已登录，而在登录时什么也不做。 如果未登录，则添加myHideClass ，一旦登录，请删除myHideClass

编辑：

但是，有一个问题是我很确定display: none; 如果您使用的是调试器，则元素仍将在DOM中可见。

Angular具有ng-if属性，您可以放置​​标签并绑定到布尔值。 类似于ng-if="userIsLoggedIn" ，其中userIsLoggedIn是控制器中的布尔值，设置为true或false 。

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

您将在dom中看到的是<!--ng-if="userIsLoggedIn"--> ，一旦布尔值翻转为true，则注释的html行将变成您的所有实际html。