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.
Related
I'm trying to dynamically load a directive template based on a condition, in my case the type attribute from directive scope. The template that is being loaded looks like this:
<div ng-switch="type">
<div ng-switch-when="player" ...></div>
<div ng-switch-when="npc" ...></div>
</div>
After reading some related questions, I have found that there is a way that I can do what ng-switch does, but within the directive itself. I have tried to use vanilla JS switch inside a function that replaced the template string within the directive, but with no success, my guess would be due to the fact that I was using a scope attribute as the switch condition.
Being new to Angular makes finding and understanding solutions to my problem quite difficult, so if I didnt explain my issue with enough clarity, let me know.
Any help is greatly appreciated.
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.
When animate module is loaded then ng-show does not work. Default value for ng-show expression is false, but element is still shown and class ng-hide is missing. If i unload animate module, then it works fine.
<script>
var app=angular.module('app', ['ngRoute','ngCookies','infinite-scroll','ui.mask','ngAnimate']);
</script>
I have the same problem, it's probably a timing issue, but there is a workaround.
in short, there is some collision between a class defined in the "class" attribute with interpolation, and other directives on the same element trying to add another class. removing the class="{{::item.customClass}}" gets ng-class and ng-show directives to work fine.
I couldn't reproduce it on a plunker, probably because of the large amount of components involved. we use $templateCache service, ngAnimate module, and a directive that uses ng-repeat with dynamic class and ng-show (and more, which did not seem to affect the problem). Removing any of those mentioned had solved the issue.
there is one thing I didn't try and that's trying to detach the code from the ui-view hierarchy, perhaps the ui-router is a part of the problem.
Debugging showed that after the ng-class/ng-show's watch executes, the right class was added and it looked like this: class="{{::item.customClass}} ng-hide", but at the end of the digest cycle it looked like this: class="myCustomClass". I guess that is what happens in your code as well.
The way I handled this situation is by moving item.customClass to the ng-class like so: ng-class=[{ ... other classes}, item.customClass]
it's a workaround and not a real solution because:
it's probably a real issue inside Angular's code.
I don't know how to use bind once here, and it's important of course.
Take a look at animate.css. It works with Angular and you can trigger it by class='ng-show'.
Like this:
<div class="animated fadeInRight" data-ng-class="loginShow">
If you set $scope.loginShow to 'ng-show' in your controller it will trigger the animate effect automatically.
If you want to trigger the animate effect on 'ng-hide' you have to write it in your controller like this:
$scope.loginShow = 'ng-hide-add animated fadeOutRight';
Hope this helps!
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">
I've added a new element to the DOM and set it with ng-model attribute.
Since this element didn't exist when document loaded when angular did his stuff the binding doesn't work.
How can I manually add this element to be handled with angular?
I'm sure it has been asked before but I didn't manage to find the answer...
Thanks in advance!
Essentially you'd have to use $scope.$apply().
There's a fine article on this here.
EDIT:
Also, there's another question here on StackOverflow that might help. Maybe you need to use $scope.$watch() to listen for events and only then, use $scope.$apply()
Check out the question here.
after creating the element at the controller code i used
$compile(element)($scope)
and it worked.