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规则＆quot; display：none＆＃39;隐藏元素。

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

Answer 2

像

这样的东西

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

可能？

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

像

这样的东西

.myHideClass {
   display: none;
}

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

现在当你做任何逻辑时，你必须看看他们是否已经记录，当他们登录时什么也不做。如果他们未登录，请在登录后添加myHideClass，然后移除myHideClass

修改：

但有一个问题是，我非常确定display: none;仍然会在DOM中显示您的元素，如果您在调试器之类的东西中。

Angular有一个ng-if attr你可以放在标签上并绑定到一个布尔值。与ng-if="userIsLoggedIn"类似，其中userIsLoggedIn是控制器中的布尔值，设置为true或false。

在dom中userIsLoggedIn为真，元素及其中的所有内容都在dom中，但是;如果userIsLoggedIn === false然后在dom中检查它，你的div就不可见了。

你在dom中看到的是一旦布尔值翻转为真，那么注释的html行将变成你所有的实际html。

纯JS中的Angular ng-hide指令

2 个答案: