In AngularJS, I want to hide an element to restrict users that are not authenticated from seeing it.
ng-hide directive is working, but when someone is opening the Developer Tools, he can change the class given to the element (ng-hide) and then he can see the content.
How can I make ng-hide more secure for authorization?
Thank's for help!!!
P.S: I'm using Node.JS for backend
You can use ng-if for example :
<input type='text' name='firstName' ng-if="expression" />
As already suggested by Pankaj Parkar, use ng-if. ng-if will remove elements from the DOM. ng-show/ng-hide does not remove the elements from the DOM. It uses CSS styles to hide/show elements.
Related
In my code ng-show is working fine on firefox and not on IE 11.
<div ng-show="isExist" class="panel panel-default">
and in controller
$scope.isExist = false;
if(user.name)
{
$scope.isExist = true;
}
I am getting $scope.isExist as false and the Div gets hide on ff/chrome, but not on ie11.
This is really a CSS question. ng-show will add .ng-hide class to the element. Double check your panel and panel-default classes to make sure that nothing is overriding the style.
Or remove your panel and panel-default classes and it will work.
Sorry guys. It behaves weired. Now it started working fine. I am pretty sure it is not a cache issue since i have cleared number of times. not sure what went wrong. it works fine now. thanks for your help.
I faced this same issue of ng-show not working in Internet Explorer.
The official ngShow AngularJS documentation mentions about this, and provides a few workarounds for this.
(I'll copy-paste the text mentioned in that link, in case that link has expired or is not working for some reason)
When using ngShow and / or ngHide to toggle between elements, it
can happen that both the element to show and the element to hide are
visible for a very short time.
This usually happens when the ngAnimate module is included, but no
actual animations are defined for ngShow / ngHide. Internet
Explorer is affected more often than other browsers.
There are several way to mitigate this problem:
Disable animations on the affected elements.
Use ngIf or ngSwitch instead of ngShow / ngHide.
Use the special CSS selector ng-hide.ng-hide-animate to set {display: none} or similar on the affected elements.
Use ng-class="{'ng-hide': expression} instead of instead of ngShow / ngHide.
Define an animation on the affected elements.
The second suggestion (replacing ng-show with ng-if) worked for me. So in your case, you could consider using this -
<div ng-if="isExist" class="panel panel-default">
I'm trying to use a chat from angular based Quantumui module in my project and I don't completely understand what notice means.
Just add nq-slider attribute directive to an element which has ng-model.
Who can provide an example how could this relation looked like?
You have to write something like this:
<div nq-slider ng-model="something">
F.e. i have elements on website like this:
<input type="text">
Can i replace them with paper-input, f.e.? The problem is, i using Drupal, there is many forms generated by Form API and other elements. Replace them all to paper - is pain or not can be done, so i looking for method to replace default html elements with polymer's.
I think this is something you would need to do through Drupal or their templating system. You can't really overwrite the native HTML elements that it's outputting to the DOM. You would need to either have the Forms API output paper-inputs instead, or you would have to replace them all with JavaScript created elements, which wouldn't be very efficient.
Polymer permits the extension of native elements
Additionally, you can wrap the existing input in paper-input-container to achieve the same result as using paper-input (this is how paper-input works)
<paper-input-container>
<label>Your name</label>
<input is="iron-input">
</paper-input-container>
There's not going to be any easy way besides editing your Drupal form templates.
In AngularJS,
how would I make a HTML exist only if a scope variable is true?
I know there is the ng-show directive but this will not work for me as it will only make it invisible with display: none, but what I need is actually that the element only exists in the DOM when something evaluates.
Something like this would work for me: <div ng-exists="myvar==myothervar"></div>
You can use Angular's ng-if directive (see the docs):
<div ng-if="myvar==myothervar"></div>
https://docs.angularjs.org/api/ng/directive/ngIf
is what you are looking all over
may be what shall give you what you are looking for. Check you angular version though.
I have a rather simple select box in angular JS. I am trying to add a class to toggle/hide the individual elements. I have tried in various ways and I am simply not getting something about angular js.
<select ng-class="{hide: user.student == false}" class="btn-blockAddress" ng-model="docs.address.type" ng-options="t for t in consts.data.typeOfAddress"></select>
<select ng-class="{hide: user.student != false}" class="btn-blockAddress" ng-model="docs.address.type" ng-options="t for t in consts.data.typeOfAddressForStudent"></select>
This is not working for me. It disables one, and not the other select, but then when I change user.student, I expect them to swap, but there is no change.
Should I be defining the behavior of the DOM form some other location? I understood the purpose of angular js was to watch variables for change. I have based my code on similar use in other parts of the codebase.
How do I inspect the value of user.student at the point it is evaluated to decide the class?
The javascriptish statements that go in directives are not really javascript - so what is it?
I have found the docs for angular js pretty good to show specific use cases, but I can not find clear API info that I can lookup.
There is a plugin for the dev tools called Batarang that is life saving. Check out this video for usage.