Isolate Scope "="

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 9 years ago
Updated 3 years ago

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

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.

alpa
alpa
~ 3 years ago

AngularJS videos are not organised :(