This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Isolate Scope Review

3:30 Angular 1.x lesson by

A review of the three types of isolate scope binding methods in AngularJS. The "@" operator is used for reading an attribute, "=" is used for creating a bi-directional two way binding, and "&" is used to make a call on something a controller scope.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

A review of the three types of isolate scope binding methods in AngularJS. The "@" operator is used for reading an attribute, "=" is used for creating a bi-directional two way binding, and "&" is used to make a call on something a controller scope.

Avatar
Roman Ganchenko

Very good explanation of scopes! Thank you

In reply to egghead.io
Avatar
hamada.yamasaki

Hi ,
Could you plz explain why in index.html

we are using make-call instead of makeCall.
In controller under scope we have : { makeCall : ...} but no where make-call.
Do we need to break camelCase with dash("-") in angular?

In reply to egghead.io
Avatar
Joel

Hi ,
Could you plz explain why in index.html

we are using make-call instead of makeCall.
In controller under scope we have : { makeCall : ...} but no where make-call.
Do we need to break camelCase with dash("-") in angular?

it's a bit of an oddity, for sure. Basically you can consider it "valid JS vs. valid HTML". makeCall is valid JS, but isn't valid as an html attribute. make-call is valid HTML, but is not valid JS variable name.

Behind the scenes, Angular translates the directives valid JS name for markup.

From the docs:

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:
Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase.

In reply to hamada.yamasaki
Avatar
Karen

I didnt get the "=" network case, John said its been automatically created above isolated scope - ctrl scope in this case, but when I try to console log it to see the actually created "network" obj/var I get "undefined". Maybe Im misunderstanding smth?

Avatar
Michael

This is because makeCall is translated to make-call as an attribute. This is just like directive names. If I had a directive named makeCall it would be marked up as make-call. The camel-casing is turned into dashed case.

In reply to hamada.yamasaki
Avatar
lucb202

In this example you say that they are on a "family plan" so when you change the network, all the networks change. This is nice because you can hard set the network = networks[0]. What if they weren't on a family plan? So instead you are passing in the plan for each family member and then you need to match that to the index it is in your array. How would the directive change?

In reply to egghead.io
Avatar
John

If I understand your question correctly, you would need to pull the list of networks out of the Directive and put them into the Controller.

https://jsbin.com/tozukugemi/1/edit?html,js,output

Then you could pass then networks in using networks="appctrl.networks so that each directive would be able to select its own network.

In reply to lucb202

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.

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