The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Isolate Scope Review

Isolate Scope Review

3:30
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.
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?