Using the Angular scope $destroy event and method.

Man 1: [00:00] In this demo I have a controller and a directive which are both found inside of an ngIf element. Meaning that when I click this button here, it's going to toggle that ngIf and completely remove these elements. So what that means, it's going to invoke, when I click toggle, it's going to invoke scope.destroy. So I'm listening to destroy here, inside of my controller, and I'm listening to destroy here inside of my directive.

[00:28] The destroy event is going to give me one last chance to grab any data off the scope that I need before it's removed and prepared for garbage collection. So say for example I had something like my.person.firstname and if I wanted to grab that I could go ahead and log out my.person.firstname. And you can see here when I refresh and type in John in my form, hit toggle, you'll see that it logs out John and then if I toggle again, John is gone because it was destroyed and I'd have to enter in new data.

[01:04] If we do want to save this data out before the scope is destroyed, it's pretty easy just to do something like create a factory. We'll call it factory person, and then return an object with the first name John, a last name, we'll say Lindquist. Just inject our factory in here, say person and then whenever it's done we can just say my.person equals person. And also when, on our first pass we'll just say my person equals person. That way any time it's destroyed it will just assign it to person and then when the controller and scope are both recreated, it will just bring those properties back in.

[01:47] So now when I refresh, you can see I get John Lindquist in the first pass. I'll delete this. Type in Ben, hit toggle, it destroys it. Hit toggle again and it comes back with Ben all ready set. And actually, because we're using ngModel here and this is all ready two way bound, we don't have to use destroy because any time this changes. I'll just hit save here. Any time this changes, the properties will all ready be saved onto the factory. And then any time the controller and scope are recreated it's just going to reassign. So I actually don't even have to use destroy in this scenario, where if I refresh and hit toggle, you'll see it will come back with John. I'll say Bob, toggle, and it will come back with Bob.

[02:35] Now in the rare scenario where you are completely done with your scope and you don't need to use it anymore, you can actually manually invoke scope destroy. So I'm going to do this through my.click, and we'll just say scope destroy whenever I call my.click. And I'll switch over here. I'm going to bring the toggle up into the scope of the ngController. So up here. And instead of toggling is toggled, I'll say my.click. And so then when I click on that, it's not going to toggle the ngIf anymore, it's actually going to invoke destroy on the scope of the controller.

[03:15] So when I refresh now, you can see when I type it will say, it will automatically update beneath because the bindings are working and everything. Now when I click toggle, it's going to invoke destroy here and because it destroyed this, the bindings are broken. So it no longer has those bindings set up. Anything I type it's not updated because it destroyed that scope and there's no longer any listeners attached to the scope. None of the watchers or anything are going to fire. The scope is just ready to be garbage collected.

[03:49] So just to refresh and to show again. And hit toggle, the scope is now destroyed and you can say not working. But it's actually working as expected. Now that's an edge case. You're not typically going to destroy a scope after you create it, because you'll want those watchers to fire. You'll want things to be changing when you change other things. But in the rare scenario where you are completely done with something after it's set up and you don't need to do any more rendering or updating, you can use scope destroy yourself.