Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 998 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Isolate Scope "="

2:51 Angular 1.x lesson by

Perhaps the most useful of the isolate scope binding methods, this episode talks about the use of "=" for two way binding within your directives.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Perhaps the most useful of the isolate scope binding methods, this episode talks about the use of "=" for two way binding within your directives.

Avatar
Mike

I'm a little confused about the usefulness of this particular method. In your description you say it's "Perhaps the most useful of the isolate scope binding methods" but in the actual video you say it might seem useful but the other 2 methods "@" and "&" are used much more often. Can you please clarify about this? There are many ways to do things in Angular so I think it's really important not to confuse newbies (like myself) with these conflicting descriptions. Thanks!

In reply to egghead.io
Avatar
Jordan

I'm also new and having trouble seeing how this is useful. In what situation would I want to use this?

In reply to Mike
Avatar
Jonathan

I had a hard time with this in my code because I had camel-case variable names. I forgot the AngularJS 101 naming convention on the conversion of CamelCase to dashes:

scope: {
myName: "="
}

is an attribute that looks like:
<custom-directive my-name="John" >

Not:

<custom-directive myName="John" >

In reply to egghead.io

John Lindquist: Now that we've talked about the "@" sign, let's talk about the "=" sign. Let's switch over here and put in "=." You'll see automatically that it's going to break. Basically, you're going to throw errors and everything, because it's not expecting a string any more. It's actually expecting an object to combine to, which would be something like that.

So, you get rid of the double curlies. It's not an expression any more. If you refresh, you can see that it's actually bound to that Blackberry property there. Now, what this is actually doing, it's setting up a binding both ways. Instead of having just a div here, if I were to set up an input text to ng-model, and then bind this to "flavor," that's going to say that when I update this, also send that change out to here, through here.

You actually might not be able to see this yet, so let's do this, too. We'll set up another input. This one will be text "ng-model flavor." Then we'll say this one's the controller, and this one's the directive. So, controller and directive and specify update from...so from the controller. Here, this would be from the directive, and that's also sending the updates out to the controller level.

You can think of the "=" sign as basically being this is set to that, and whatever changes happen, update them. You'll never pass in the double binding in there, because that's just going to send a string like in the "@" sign, it was accepting a string. Here you're going to be sending in a property on a scope to bind to, so that you have the binding happening both ways.

It looks like that's all about there is to cover on that. I think that's used a lot less than you probably think it is, when you're actually building out directives. Maybe when you're doing little demo things, it might be cool. But I think the "@" sign and the "&" sign to cover next, is used a lot more often than this two-way binding "=" thing.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?