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).
Related
What I mean is - I have a directive that is being duplicate on the same page. Lets say it is a grid. I have 3 grids on the same page. Now, each one of the grid is firing event called "Foo" but I want to know which of the grids really fired that event. How can I know that? Is there an id to each of the same directive child's?
If you're broadcasting a DOM event then you can use Event.targetto get the element the event was triggered from and from that you can use angular.element(Event.target).scope() to get the scope of the triggered element. If the triggered element isn't the grid itself but a child of the grid (likely) then you'll need to use jqLite or jQuery to find the grid from the target.
If you're not broadcasting a DOM event, then use your own event object that provides a target property.
I'm trying to realize a simple directive in AngularJS. In particular I want to develop a loader button that change its aspect when pressed, and I want to reuse it in all the page of my application that need it.
I have read on the developer guide that:
"There are a few special events that AngularJS emits. When a DOM node that has been compiled with Angular's compiler is destroyed, it emits a $destroy event. Similarly, when an AngularJS scope is destroyed, it broadcasts a $destroy event to listening scopes. By listening to this event, you can remove event listeners that might cause memory leaks. Listeners registered to scopes and elements are automatically cleaned up when they are destroyed, but if you registered a listener on a service, or registered a listener on a DOM node that isn't being deleted, you'll have to clean it up yourself or you risk introducing a memory leak."
In my link function I have put this code for the event listener:
var onLoaderButtonClickEvent = element.on('click', function(){
//Some stuff
});
Now, have I to consider that as a listener on a DOM element (and so I have to remove it) or not? I'm a lit bit confused.
I think that I have not to remove the listener because is on the "element". Is it correct?
Thx to all
The element.remove() is called automatically when a directive is destroyed, thus removing all listeners on the element. You only have to remove DOM listeners manually if you attached them to any other DOM elements.
From angular's documentation:
Listeners registered to scopes and elements are automatically cleaned up when they are destroyed, but if you registered a listener on a service, or registered a listener on a DOM node that isn't being deleted, you'll have to clean it up yourself or you risk introducing a memory leak.
The answer is yes. As you've attached an event handler outside of AngularJS, you'll need to clean it up yourself.
You can do this by listening to the $destroy event:
scope.$on('$destroy', function(){
element.off('click');
});
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.
First all, I want to be clear that my question is NOT about the $destroy event associated with AngularJS Scope.
AngularJS patches jQuery to make all jQuery's DOM destruction apis to fire a $destroy event on all DOM nodes being removed. jqLite (comes with AngularJS) also behaves in the same way, if no jQuery is used. I have seen the $destroy event been used (ie. bind to) in a few occurrences in AngularJS' source. But still, I cannot reason what are some practical uses of binding to the $destroy event on DOM elements being removed. Please enlighten me.
Here is a valid issue from the AngularJS github repository that could be solved with this event: https://github.com/angular/angular.js/issues/3237
Check this fiddle: http://jsfiddle.net/Amh8W/2/
$element.on('$destroy', function() {
$scope.window.close();
});
Window is closed when directive is removed - try to handle that in another way. $destroy has functionalty similar to destructor.
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.