AngularJS isolate scopes can be a bit cryptic when you are first starting out. In this lesson, John looks at the attribute or "@" designator in your isolate scopes.

Isolate Scope "@"

**John Lindquist**: Let's talk about setting up the isolated scope with the "@" sign property. I'm going to make an attribute called "drink," just because I'm drinking a soda right now, and let's say, directive, and call this "drink," and Function, or Turn Object. Basically, for right now, we'll just do a template which has a div inside of it. It's always easier if I can do my shortcuts inside of the string.

It has a div inside of it bound to Flavor. We haven't set Flavor up yet, but we'll do that in the linking function, because it will say, "Scope." Then, I will just do Scope for now. I'm going to say, "Scope," "Flavor = Cherry," and then, if this is all wired up, you should see a cherry, because it's just a div with the Flavor inside of it.

What you do, if you want to pass in that flavor, it's a flavor, and we'll switch over to "strawberry," and then "Scope Element Attributes," like we've done a couple of times already, and say, "Attributes," "Flavor." Now, once we do this, and, see, it switches over to "Strawberry," the scope isn't isolated yet.

Once we isolate it, this is not...How can I break this? You'll still be able to get the flavor off of the attributes, but, basically, what this "@" sign allows us to do is set it up so that we can get "Flavor" out of the attributes and just read it in as a string, just as if you're doing that "Attributes.Flavor." This will set that up automatically for you and assign it to the scope.

If you refresh now, it will still get "Strawberry." If you compare the two, you can see how this is doing "Scope.Flavor" is attributes [inaudible 02:32] . That's the exact same thing. I'm just saying, "Scope," "Flavor," is just a string of what it is.

Where people get confused here is, if I have something on my controller, if I do, let's say, "Control Flavor," just so it looks different, say "Control Flavor" is Blackberry, a very successful phone company, and we'll send in a bind in here of "Control Flavor," and they think that this expression is going to throw something off, or they don't know how this matches up with that "@" sign, or what's going on. Really, all that's happening is that this is getting evaluated as a string.

Then, that string is getting passed in to the attribute, and then it's reading that value off of that attribute. That's all that's really going on there. It's just basically saying, "Pass this as a string into the scope and assign it. Then you have access to it on the scope inside of your directive."

I just wanted to add one more thing here really quick. If you do have something like an input with an ng-model bound to Controller Flavor. This will still update the binding in the directive, whatever. This is just getting reevaluated each time I put in a string, and, again, still doing the same stuff. I didn't touch the directive at all.

That's why some people may be confused, or not, but that binding still works just simply because it's evaluating to a string and passing it in.

Isolate Scope "@"

Share this video with your friends