javascript - 纯 JS 中的 Angular ng-hide 指令

Question

在 AngularJS 中，你可以使用 ng-hide隐藏 HTML 元素。你将如何使用纯 JS/jQuery 来做到这一点？如果你有类似 <div id="userNotLoggedIn"></div> 的东西, 会不会是 $("#userNotLoggedIn").hide()或 $("#userNotLoggedIn").remove() ， 或者是其他东西？目标是不允许网站访问者在未以用户身份登录的情况下查看页面。

Answer 1

有点像

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

也许吧？

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

有点像

.myHideClass {
   display: none;
}

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

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

编辑:

但有一个问题，我很确定display: none;如果您处于调试器之类的环境中，您的元素仍然会在 DOM 中可见。

Angular 有一个 ng-if attr 你可以放在标签上并绑定(bind)到一个 bool 值。喜欢ng-if="userIsLoggedIn"其中 userIsLoggedIn是 Controller 中的 bool 值，设置为 true或 false .

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

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