1

In AngularJS, you could use ng-hide to hide an HTML element. How would you do this using pure JS/jQuery? If you have something like <div id="userNotLoggedIn"></div>, would it be $("#userNotLoggedIn").hide() or $("#userNotLoggedIn").remove(), or something else? The goal is to not allow a site visitor to view a page if they are not logged in as a user.

Improve this question
8
  • 1
    ng-hide is probably more equivalent to toggle(condition). Commented May 11, 2017 at 17:53
  • 1
    Not sure why you're bringing up angular. Is your question how to hide an HTML element? Have you read the docs for hide and remove? Are you not sure what they do? Commented May 11, 2017 at 17:53
  • 3
    hiding an element in this case is not the right solution, restrict navigation to that page rather using JS Commented May 11, 2017 at 17:53
  • Thanks @MikeMcCaughan and Rahul. Rahul, you're saying to restrict navigation to that page. How would you accomplish that? Would you implement that logic on the client, or server side? Commented May 11, 2017 at 17:59
  • 1
    ng-hide adds CSS so the element is not visible. ng-if decides whether or not to actually add the element to the DOM. However, like @RahulArora said, you should be restricting navigation to the page. Commented May 11, 2017 at 18:11

2 Answers 2

Reset to default
1

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.

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

Edit:

One problem though, is I'm pretty sure display: none; is still going to have your elements visible in the DOM if you're in something like a debugger.

Angular has a ng-if attr you can drop on tags and tie to a boolean. Like ng-if="userIsLoggedIn" where userIsLoggedIn is a boolean in your controller that's set to true or false.

In the dom while userIsLoggedIn is true the element and everything in it, is in the dom, but; if userIsLoggedIn === false then in the dom if you inspect it, your div is not visible.

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Super helpful. Thanks! These answers have helped clarify what I was going after. For this particular case, I think ng-if is what I'm going after since I don't want anything showing up in the DOM. Would the JS equivalent to ng-if just be a regular if statement?
@Farid because of the amount of DOM manipulation that ng-if causes, the JS equivalent would probably be fairly complex. Or at the very least contain a lot of jquery which could be difficult code to maintain in the future. Usually you want to find a 3rd party library to do heavy duty DOM manipulation instead of making your own in-house method. While an if statement could be used to watch a boolean to determine if things need to be done, like ng-if does. You'd have to write a lot more code than just a iif statement to do all of the DOM manipulation logic that would be necessary.
I was a little afraid that would be the case (which may be why Angular was/is so popular). Right now, my goal is to do all client side logic using pure JS rather than use a framework (I'm not a fan of the "Flavor of the month" issue in the JS community). And as a new dev, this should help my JS skills. By the way, I really appreciate your explanations, and for not making me feel dumb for asking questions that may not make perfect sense, so thanks.
I don't know if it is going to help you much, but here github.com/angular/angular.js/blob/master/src/ng/directive/… is the source code for the ng-if directive. I can understand wanting to take an all JS approach, but I would say this. Frameworks are 100% here to make our coding lives easier, and better. Frameworks make maintaining future code 1000x easier. For a learning experience, for sure, try and do it all with just JS. But in a production environment where code you write today could have to be changed months later by a different person, frameworks can be a necessity.
Also look up and heavily research the SOLID principles of programming. Read about it until you absolutely get it. Read it from multiple sources, do practice programs, whatever it takes to be sure you understand each letter in the acronym and how it relates to code you write. I can't stress it enough. When I got started it got me into a proper mindset that helped me have good programming habits right out the gate. It doesn't matter if your code can do complex, amazing things. If it isn't clean, maintainable, readable code, it isn't good code. These are tried and true methods worth knowing.
|
1

Well if you want to actually replicate ng-hide, then you would use jQuery.addClass method.

ngHide simply watches for the model value bound to it, and consequently adds/removes ng-hide class. This class simply adds a css rule 'display:none' rendering the element hidden.

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.

Improve this answer

3 Comments

Awesome. That's basically what I'm getting at. Using it for authentication purposes. How would you go about doing it? I figured it would have to be JS logic rather than a CSS hide or show. I don't want info accessible from the DOM.
If this page contains some sensitive information then that information should not be coming out of the server in first place. Otherwise if not, it doesn't really matter even if you do a window.location redirect to prevent user from accessing that page(dependant on your application entierly). It all depends upon your stack, frameworks used etc. I think you've asked a wrong question. The answer to the question is what I've posted ( you might want to mark it accepted btw ). Search google or post a new, better phrased question if u dont find it. I bet there will be a lot of them around
Thanks, again, for the feedback. This was actually my second attempt at asking this question. I don't think I asked the wrong question. My first attempt was a lot more detailed, but some people didn't like it. I'm just trying to figure out how to keep unauthenticated users from viewing certain pages. ng-hide just does a display: none in CSS, which isn't what I want. ng-if sounds like the answer. By the way, if the page contains sensitive information and you say it shouldn't come from the server, then where should it come from?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.