I am creating a new directive and I wondering how to be notified when angular remove the element from the DOM.
My aim is to add a jquery animation when an element is removed.
If you are trying to animate the removal of element you need to do this before it is removed.
I've created a fiddle demonstrating this.
In the first section you listen the $destroy event that angular call to elements that are being removed from DOM.
In the second case I've created a directive that fadeOut and remove the element automatic.
In the third case the directive just fadeOut the element and the removal is passed to controller.
If you want to fadeOut the element that are removed then you can't use the first option.
Between the second and the third I personally suggest the third because it is more flexible.
Related
there is a ng-if animation example in this doc:https://docs.angularjs.org/api/ng/directive/ngIf
if you clicking the checkbox quickly and repeatedly,you will find more than one element will be displayed,I don't know how to avoid it.
This happens because ngIf behaves different to ngShow for example. ngShow simply adds a display: none style to the element that must be hidden, while ngIf does the following:
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.
So if the animation takes a bit long, there will be more than one element in the DOM.
In Olivvv's example, if you just change the delay of .animate-if.ng-enter, .animate-if.ng-leave to 0.001s you will se that you cannot get more than one element.
Here for you to see it is a forked version of the official AngularJS documentation. http://plnkr.co/edit/ok7nwOIRpR1TYYRkBRXj?p=preview
I have only modified its delay from 0.5s to 0.001s
I have created a directive and using inside ng-repeat. I am using remove button also to remove specific element from the list. The issue is, whenever I remove specific element from list, it always trigger $destroy in my directive on the last element in the list instead of specific element.
For example, I have 4 elements in the list like [1,2,3,4]. My directive displays 2 text boxes. I uses ng-repeat to iterate over list and display directive with 2 textboxes and remove button in every row. Now I clicked the remove button on 2nd row, but it triggers the $destroy on 4th element in my directive instead of 2nd.
Any idea how to fix this, to trigger the $destroy on specific element only.
It's due to track by $index, in which case it will always remove the last row in the list.
I am using ng-repeat for my Model render in angular ,
if i Push new Element in Model/Collection , Will angular only deal with Update or Loop through the whole model again.??
My experience (using Angular version 1.2.7) is such that whenever something changed in collection, the whole ng-repeat was repainted.
You can easily test it by modifying the generated DOM. For example by adding custom attributes like my-id="1", my-id="2" etc to the DOM elements.
Then change something in your collection, which will trigger new $digest cycle.
Angular will pick up the change and redraw the DOM -> your custom attributes will disappear.
So I would argue that Angular loops through the whole model.
In the documentation it is clearly mentioned:
ngRepeat
ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope
Angular associates an identity to every item, the elements already associated to the existing items of the collection won't be recreated.
Hence, only elements that are removed from the collection, are removed from the DOM. Furthermore, if an item moves within the collection it doesn’t need a new scope, but it needs to be moved in the DOM.
I am trying to find a way to detect when an element is finally appended to DOM? Is there any directive that I can create and attach to that element so it will detect the moment of appending? By creating elements I mean ng-repeat, and onload and $last do not work for me.
I'm looking for a way where I can hook into removal of an element attached to an ngRepeat. I am doing this in order to add some animations. For the addition of the element it is easy enough to use the 'link' event, which is called when it is first created. I don't know how to intercept the removal event. Essentially I'd like to do the DOM removal myself.
You can tell when the element is being deleted by subscribing to the $destroy event on the scope:
scope.$on('$destroy', function(event) {...});
I'm not sure if you could take over removal of the element yourself, but maybe you could clone the element and manipulate the clone (like jQuery does with draggables).