Isolate Scope Review

John Lindquist: Let's do a quick review of the isolate scope options. We have the "@" sign which is basically short hand for reading in an attribute. I'm just passing in these numbers. Those numbers could have been on the controller but I didn't want to set up individual properties just for those numbers so I just passed them in.

Then there's the "= "sign which is going to set up a bi-directional two-way binding so that anything I update on here in the directive itself will also update everything in the controller scope. Then, the "&" sign is going to be able to make a call on something in the controller scope and invoke that within the inside of that scope. We're going to call that "Lee voicemail" and then pass in those parameters and it's passed through "make call."

If we look at this, I typed in a message before I started here. So if I click "call home," I sent the number back and pass the message along with it. If I try to change my network since all these phones are on a family plan, we'll just assume that, this is where the two-way binding takes effect.

If I change to Sprint, they all update to Sprint not because there's any sort of relationship between the directives themselves. They all have isolate scopes. It's just that it's binding to the network property inside of app controller which isn't just basically set up here and automatically created there. These will all auto update and reflect the changes across all the directives and if there's anything else bound to it in the controller scope, those would update as well.

The "make call," that is simply when I click the button, I'm able to execute the expression it gave me. Make call is an index. It's mapped to this "Lee voicemail." Then, I pass in those parameters. In our controller, we can leave a voice mail.

That's isolate scope in a nutshell. That's when you would use each one. There are some other scenarios there. You can ask in the comments and I can do further examples along this stuff but I think that's a pretty decent overview of how they're different, where to use them, and why to use them. Again, the number one reason and people will forget this sometimes, you create a directive, you'll probably going to use it, especially on element directives, multiple times.

If you don't isolate the scope, that's going to do something called "polluting the scope of the parent" meaning that you're going to bind to things and it's going to start updating across directives when you don't want it to so make sure that if you going to make a reusable directive like an element or something, to isolate the scope. Then, if you want to do that binding and cross directive with parent scope, use the "=" sign. If not, you want to keep them separate which is usually the case, just leave the scope as isolated.