[英]Angular ng-hide directive in pure JS
In AngularJS, you could use ng-hide
to hide an HTML element. 在AngularJS中,您可以使用
ng-hide
隐藏HTML元素。 How would you do this using pure JS/jQuery? 您将如何使用纯JS / jQuery执行此操作? If you have something like
<div id="userNotLoggedIn"></div>
, would it be $("#userNotLoggedIn").hide()
or $("#userNotLoggedIn").remove()
, or something else? 如果您有类似
<div id="userNotLoggedIn"></div>
,它是$("#userNotLoggedIn").hide()
还是$("#userNotLoggedIn").remove()
或其他东西? The goal is to not allow a site visitor to view a page if they are not logged in as a user. 目的是如果站点访问者未以用户身份登录,则不允许他们访问该页面。
Well if you want to actually replicate ng-hide, then you would use jQuery.addClass method. 好吧,如果您想实际复制ng-hide,则可以使用jQuery.addClass方法。
ngHide simply watches for the model value bound to it, and consequently adds/removes ng-hide class. ngHide只是监视绑定到其的模型值,因此添加/删除了ng-hide类。 This class simply adds a css rule 'display:none' rendering the element hidden.
此类仅添加一个CSS规则“ display:none”,将元素隐藏。
However, using it for authentication based roles wouldn't usually be a good idea though. 但是,将其用于基于身份验证的角色通常不是一个好主意。 You would be simply making it invisible, but it will still be in the DOM and hence accessible.
您只是使其变得不可见,但它仍将存在于DOM中,因此可以访问。
Something like 就像是
$('#userNotLoggedIn').css('display', 'none');
maybe? 也许?
But if you want to be able to apply, and undo it, I recommend putting display: none
in it's own class that can be placed and removed at will. 但是,如果您希望能够应用并撤消它,我建议您放置
display: none
在自己的类中display: none
可以随意放置和移除的类。
Something like 就像是
.myHideClass {
display: none;
}
$(`#userNotLoggedIn`).addClass('myhideClass');
$(`#userNotLoggedIn`).removeClass('myhideClass');
Now when you do whatever logic you have to see if they're logged, when they are logged in do nothing. 现在,当您执行任何逻辑时,都必须查看它们是否已登录,而在登录时什么也不做。 If they are not logged in, add
myHideClass
, once they do log in remove myHideClass
如果未登录,则添加
myHideClass
,一旦登录,请删除myHideClass
Edit: 编辑:
One problem though, is I'm pretty sure display: none;
但是,有一个问题是我很确定
display: none;
is still going to have your elements visible in the DOM if you're in something like a debugger. 如果您使用的是调试器,则元素仍将在DOM中可见。
Angular has a ng-if
attr you can drop on tags and tie to a boolean. Angular具有
ng-if
属性,您可以放置标签并绑定到布尔值。 Like ng-if="userIsLoggedIn"
where userIsLoggedIn
is a boolean in your controller that's set to true
or false
. 类似于
ng-if="userIsLoggedIn"
,其中userIsLoggedIn
是控制器中的布尔值,设置为true
或false
。
In the dom while userIsLoggedIn
is true the element and everything in it, is in the dom, but; 在dom中,
userIsLoggedIn
为true时,元素及其中的所有内容都在dom中,但是; if userIsLoggedIn === false
then in the dom if you inspect it, your div is not visible. 如果
userIsLoggedIn === false
则在dom中(如果您检查),则div不可见。
What you'll see in the dom is <!--ng-if="userIsLoggedIn"-->
And once the boolean flips to true, then the commented html line will turn into all of your actual html. 您将在dom中看到的是
<!--ng-if="userIsLoggedIn"-->
,一旦布尔值翻转为true,则注释的html行将变成您的所有实际html。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.