I'm trying to create an animation for an element that is initially hidden by a ng-show="boolDefaultIsFalse" attribute.
When I trigger the boolean to be true then the element is shown, but the animation doesn't play.
This is because the element never gets the ng-show class. It does start with a ng-hide class. But as soon as I show the element then that class is removed and no new ones are added.
Here's a demo of my problem: http://plnkr.co/edit/OkJnxKlp9Ym1mc8CCD05
Anyone any idea how to solve this problem?
Update
I've updated the Plunker.
I added the ng-class directive to add the ng-show class manually to the div. But the animation still doesn't play.
When you include ngAnimate as a dependency of your module:
var app = angular('app', ['ngAnimate']);
Angular will automatically add/remove the following CSS classes when the ng-show/ng-hide directives are applied:
ng-hide-add
ng-hide-add-active
ng-hide-remove
ng-hide-remove-active
To take advantage of this, add your CSS animation styles to these classes.
Here is an Demo
From the angular documents for ng-show:
The element is shown or hidden by removing or adding the ng-hide CSS class onto the element.
If you want to dynamically add / remove a class, you should use ng-class.
Related
I would like to add a 'ng-click' to an element that ui-bootstrap renders from the accordion directive.
I am using angular 1.5, so there are a lot of solutions out there but they dont work for angular 1.5.
If I am correct you can override the template with your own template and put ng-click on the element in the template.
template-url (Default: template/accordion/accordion.html) - Add the ability to override the template used on the component.
The code I am working on has this:
<div ng-if="cos.connectMessage" style="text-align: center;" class="ng-scope">
Unable to establish a connection to the localhost server for 5 minutes.</div>
Is there any advantage to using ng-show or ng-if to control the visibility of this message?
ng-show
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. (reference)
ng-if
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM. (reference)
Note: When ng-if removes the element it also removes the associated scope for that element and it get recreated when condition turns true.
Advantage
I prefer the use of ng-if specifically when number of watchers bound inside the element is more as it would completely destroy the scope so making the UI a bit faster. But for small elements or elements containing less watchers does cost overhead of removing scope and recreating it.
You can refer this for your solution, already lot of things asked in that
what is the difference between ng-if and ng-show/ng-hide
If you are using ng-if="false" then html content under ng-if will not includ in your html page, but if you are using ng-hide="true" or ng-show="false" then html part includ in your html page but it will only in hidden mode.
When i want to make something start as hidden with ng-show you can just add class="ng-hide" so the css will hide the element beforehand. This way an element won't be shown when the page is still loading
I want to do the same thing using ng-if but i don't know how to do it
As Michiel suggested, using the ngCloak directive is the solution.
Just add ng-cloak to the class attribute of the tag you want to keep hidden while your application is loading.
<div class="ng-cloak">test</div>
For more details: https://docs.angularjs.org/api/ng/directive/ngCloak
there is an ng-show directive in angular, but is there a ng-render directive? that adds the template of a directive to the dom only when conditions are met?
the problem with ng-show is that it only uses css to hide elements, and since I am creating an enormous list, and I am only displaying the visble elements, I dont want the content of not visible content to be partially rendered.
You can use ng-if or ng-switch. Neither include content unless your conditions are met.
I have an application that contains a div with content in it. When I click a button jQuery adds a AngularJs directive to the div. After adding the directive i call scope.$apply(), but this doesn't seem to inform angular about the new directive on the div. Can someone explain to me how I can inform AngularJs about the new directive added with jQuery?
You shouldn't be adding directives to your markup with JQuery. Use Angular for that whenever possible.
That said, if you have to add directives via straight DOM manipulations like that, you'll need to use the $compile provider to compile the element and bind it to a scope before you add it.