Using jqLite to hide and show html elements - javascript

Like any normal person creating a web application using AngularJS, I initially tried using ng-hide/ng-show to make certain elements visible under certain conditions. For some reason, this doesn't want to work, and the code is too complex for me to recount it here. I figured it would be easy to use jQuery (or at least as much jQuery as Angular has built into it). This is what I have so far:
angular.element(document.querySelector([ELEMENT ID])).off();
The above line works for the purposes of hiding, but I can never get it back. In case you're wondering, I'm trying to hide buttons for otherwise unrelated actions. Using ".on()" for the code above doesn't work. How does this line need to be written in order for the element to disappear? More importantly, How do I make it reappear?

ng-show and ng-hide work with boolean values. Don't use jQuery inside the controllers. If you are needy to use that, create directives for that purpose.
Create flag variable in scope of controller. Set it to true or false
Now ng-show will show the element if it receives boolean value as true and will hide if it receives false.
Vice versa for ng-hide, it will hide if it received true and show if receives false.
So decide between either one of them, don't use both. So considering flag name is active and it is set to true and you want to show button in beginning. The code can be:
angular.module('demo', []).controller('DemoCtrl', function($scope){
$scope.active = true;
});
And the template will look like:
<div ng-app="demo">
<div ng-controller="DemoCtrl">
<button type="button" ng-click="active = false" ng-show="active">Hide Me</button>
<button type="button" ng-click="active = true" ng-hide="active">Reset</button>
</div>
</div>

We need a small css for this purpose:
.display-hide {
display: none;
}
Lets say there is an validation summary we are showing on the page;
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
#Html.ValidationSummary(false)
</span>
</div>
And with using jQuery;
jQuery(document).ready(function () {
#if(!ViewData.ModelState.IsValid) {
<text>
$('.alert span').parent().removeClass("display-hide");
</text>
}
else
{
<text>
$('.alert span').parent().addClass("display-hide");
</text>
}
});
You can use this trick for any html element.

on and off methods are not for showing/hiding elements but for adding and removing event listeners. I think by accident your element was already hidden and that led you to believe off hides element.
If you really can't use ng-hide/ng-show I suggest you use addClass and removeClass (instead of off and on) to add/remove 'hidden' class to your element. This class could would set the elements display to none.
However I encourage you to show the angular code so we can help you solve this using ng-show.

Related

Hide div if database contains value - Angular

I want to check if a postgresql database contains a specific value. If it is true I want to hide a HTML . Is this possible?
Can I hide elements with CSS & JS, or what should I use to hide the div?
Also, How would we add it in the Div like a NgIF statement
Thanks!
What you can do, vs what's best and the Angular way:
I assume you expect to have an AJAX call similar to:
$http.databaseAPI.get().subscribe(s => { this.hasValue == s.IsActive; });
Then, you could do a few things:
<div *ngIf="hasValue"></div>
Removes element from the DOM. Potentially very performance detrimental if overused.
<div [hidden]="!hasValue"></div>
Hides the element in the DOM.
<div [ngClass]="{'hideme': hasValue === false}"></div>
Changes the CSS based on an expression, and would require supporting CSS to hide the element.
Welcome to stackoverflow. You can get all that information from angular docs
*ngIf removes/adds the html elements from the html tree.
<div *ngIf="condition">Content to render when condition is true.</div>

View is Getting Change while using *ngIf or *ngSwitchCase in Angular 2

I need a help...
When i am using *ngIf or *ngSwitchCase view is getting changed. Custom javascript function is not working after change. Kindly kelp me to solve this issue.
NgIf and NgSwitchCase are inserting and removing a group of elements from the DOM. If you want to hide them visually but keep the space that they are occupying, do not use them.
Instead, you can toggle visibility CSS property.
<div [style.visibility]="condition ? 'hidden' : 'visible'"></div>

Angularjs doesn't work for display none style

I'm trying to use AngularJS with Tippy.JS for tooltips.
Tippy's HTML template tooltip (#creating-html-templates) requires us to use style="display: none" for the template, and it handles the rest.
I want to use angularjs features in the tooltip template but failed.
Here is a fiddle which reproduces the problem. #fiddle
If you remove style="display: none" it works, but Tippy doesn't.
Is there any walkarounds for this?
Update
#Razzildinho solution works only to render the value. but it cannot communicate back to the controller. It is one-way data binding, model to tippy.
Inside Tippy:
Outside:
Fiddle
Using the element id as the html option removes all javascript bindings. To keep them use the DOM element. You should also append within the element that has your controller attached.
<!-- Add ID to the controller div -->
<div ng-controller="FrameController as vm" id="controller">
You also need to remove the display: none; from your template html. From the documentation:
If you want to clone the template's content into the tooltip, specify the template's id in the html setting. Otherwise use the DOM element itself, which allows you to keep listeners attached. If you use the DOM element choice, ensure it's not hidden with display: none;.
And then your javascript for tippy should be:
setTimeout(function() {
angular.bootstrap(document.getElementById('body'), ['app']);
tippy('.tippy', {
position: 'bottom',
animation: 'fade',
arrow: true,
interactive: true,
/* The following 2 lines are new */
html: document.getElementById('my-template-id'),
appendTo: document.getElementById('controller')
})
});
It's because the resulting html and widget is working outside angular scope. The same would happen if you try to implement boostrap widgets and add some angular behavior. That's why boostrap-ui exists, to bridge those two worlds.
The best way to workaround this is by creating directives that link your js pluging with angular. When doing the directive, you might need to recreate the plugin when the expression changes by setting a watcher on vm.message.
See this post as an example: http://bencentra.com/code/2015/09/29/jquery-plugins-angular-directives.html

How to properly execute javascript against a DOM element upon ng-show?

There's a TLDR at the bottom. Otherwise here's the long-winded explanation.
I have a sort of a form, a series of various inputs that is divided into "pages" by using ng-show.
What I want is when ng-show activates and shows a new "page" and hides the old, then to execute javascript to add a class, focus, then find the input and focus on that. Essentially highlighting the next thing the user needs to do on this new page and focusing for quick input.
I've been trying to get a $watch to work but I feel like this might be over-complicating something that might have an easier alternative nor can I get it working properly.
The pages each have several divs that are questions, directions, or input elements. But when a page becomes visible, there would be one div in particular that I would highlight (see myFocusDirective placement), because some of the divs aren't actionable by the user. Example of pages:
<div id="page1" ng-show="isPage(1)">
<div>
text
</div>
<div myFocusDirective>
<input>
</div>
</div>
<div id="page2" ng-show="isPage(2)">
<div myFocusDirective>
<button>
</div>
</div>
I've been trying variations of a $watch on the attributes or using $timeout but I can't seem to accurately only match when ng-show is activated. My understanding is that it should just be applying "ng-hide" to and from the class of the div but I can't seem to match against that...
scope.$watch(function() { return element.attr('class'); }, function(newValue) {
if (newValue.match(/ng-hide/g) === null && newValue.match(/highlight/g) === null && newValue.match(/complete/g) === null) {
highlightAndFocus(element[0]);
}
},true);
also tried using $timeout on the attrs but that's unreliable due to multiple matches because of classes being applied across divs.
scope.$watch(attr.initial, function(newValue) {
$timeout(function() {
highlightAndFocus(element[0]);
});
},true);
Any help would be appreciated, I must be missing something here.
TLDR; After ng-show I want to modify the classes on a div and then focus on an input within the div
Why not make your life easier for yourself and pass the contents of your ng-show to your div as well:
<div id="page2" ng-show="isPage(2)">
<div myFocusDirective focuson="isPage(2)">
<button>
</div>
</div>
And watch the focuson in your directive scope? This way, you don’t have to worry about parent classes, etc.
But in any case, if you are watching an attr, you should be using attr.$observe

Ng-Show & Ng-Hide, what is the difference?

I'm teaching myself Angular-JS and I can't find any sort of definitive answer on what the difference between ng-show and ng-hide is. To me they appear to be functionally equivelant.
I understand the difference between them and ng-if as ng-if actually removes the watchers etc. whereas show and hide seem to serve the same purpose.
Is there any kind of performance gain using one over the other or is there situations where one is preferable over the other OR is it just two sides of the same coin and you use whichever makes more logical sense to you?
Apologies if this has been asked/answered elsewhere but I couldn't find it.
They do the opposite of each other and can be used as you want.
I think this comes down to coding preference, as some people like to write their code so that they use the method if the value is going to be true, instead of using not false!
<div ng-show="true">
instead of :
<div ng-hide="!true">
This directives differs in one row:
ngShowDirective:
$animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
tempClasses: NG_HIDE_IN_PROGRESS_CLASS
});
ngHideDirective:
$animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, {
tempClasses: NG_HIDE_IN_PROGRESS_CLASS
});
Just opposite applying of ng-hide CSS class.
As you can see, there is NG_HIDE_IN_PROGRESS_CLASS.
It's ng-hide-animate css class which temporary applied in both cases.
You can use it to animate element appear/disappear.
You should use two selectors to implement bidirectional animation:
.animate-hide for appear
.animate-hide.ng-hide for hide
ng-show and ng-hide just set the display to 'None' but ng-if actually removes the element from DOM.
As for as performance is concerned, I think it does not make any huge difference but since ng-if removes all event handlers attached to this element and its children and also the DOM element so I think ng-show or ng-hide will be faster.
ng-show and ng-hide applies display: none !important to your html with one of these directives. There is no difference between ng-show and ng-hide: it is only semantic and your choice.
So, let's suppose you have next html:
<div ng-show='condition'><p>{{text}}</p></div>
<div ng-hide='condition'><p>{{text}}</p></div>
So the in this case if your condition is true then first line of code will shows your html and hides it if your condition is false. Second line with ng-hide will do the same things but with opposite conditions: it will hides your html if your condition is true and shows it if condition is false

Categories