Name: Understanding Isolate Scope
Uploaded: 2013-08-31T21:21:14-05:00
Description: By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive.

By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive.

Understanding Isolate Scope

**John Lindquist**: Isolate scope is one of those things where you can read the docs for days and have no clue what they're talking about. Then, someone shows it to you and you're like, "Oh, that was really easy."

We're going to walk through isolate scope and why you would use it. With this kid directive, these kids are going to do chores. This kid is going to be an element, so we'll script "E" for element.

Then, we'll have a template which will look something like this. If we input a type of text, so you can tell which chore to do. Your model of "chore" and then just show the chore after, I guess.

So if we add a kid here, and we show what's going on, we'll say, "Clean your room." That's pretty simple, it's just that once we start having multiple kids, you start running into a lot of issues.

We tell one kid to clean his room and the rest of them receive that same message to clean their rooms, because they're all sharing this same scope at this point. They're not isolated from each other and how the bindings and everything update.

What you need to do is pass in an object to the scope property there. This will limit the scope to being just one per kid, basically. If we tell him to, "Clean you room," and the next kid, "Wash the dishes and take out the garbage," you can see that the binding still works.

But it's limited to the individual directive that we created. It's pretty obvious here why that's necessary.

Now where this could create some conflict is that this breaks the interaction with the controllers that wrap around it and invoking or binding to anything that's on the scope of that controller. What that turns into is playing with some of these properties in the scope object.

Let's create a chore controller and set up some things we'll want to interact with. We'll say "chore controller."

We can "log chore" and then "pass on chore" and alert can say, "Chore is done." All right, so from here, we'll just get rid of the other kids.

We only need one kid to do chores. You understand why it needs to have isolate scope, don't you? We can say when this kid is done, "log chore."

We're going to set this up "done" to basically map to the log chore in the controller. Actually, let's make sure we set up the controller before I forget.

Your controller, "chore" controller, and format this a little bit. The kid "done" is going to map to this expression here, and how we're going to do this is by using this "done" is the "&" sign for expression.

I'll go into more detail on the different expression value binding and what can go here. Basically, what we can do now is create a div with a class of button and then ng-click is going to invoke "done."

Remember, this "done" is really mapped to whatever you passed into this "done" attribute. Right now it's "log shore" and "log chore" is defined as the scope of the controller.

If you click on "done" it's going to say "undefined as done", that's because we haven't passed anything into "done." This does require a bit of special syntax because of the nature of the beast here.

You're going to pass an object with the name parameter of "chore" and map that to "chore." The property of chore's value, we already set up. In our index, we have to make sure we have the parameter of "chore" there.

Once we have this, you can say, "Clean your room," and then click on "I'm done," and say, "Clean your room is done."

So basically, if you see how this all kind of wires up, because we said this is an expression, that means that this here will map to this, and from there on out, anytime we invoke "done" it's going to invoke this. This is just a special object rotation you can use if you're going to pass any parameters to it, so they can accept them here.

So that's it for now, I'm going to go into more detail for the other options for scope, and what they mean and how they work and the differences between them and when we use them in the next few videos.

Understanding Isolate Scope

Share this video with your friends