Isolate Scope "&"

John Lindquist: The "&" sign allows you to invoke an expression, or call an expression, evaluate an expression, whatever, on the parent scope of whatever the directive is on the inside of. If we have our directive in here, we'll just create something called a phone and if we want to call something in the controller scope, we would use the "&" sign.

Basically, say, we have a function here called, "Call Home," let's say, called home. From our directive, we would just a create that phone, return object with a scope, because we're isolating the scope from the parent scope, and I think we called it "Dial" with an "&" sign.

Then, in our template, what we're going to do is create an up button, that we can click to call home, so div button, and then call home. That would say "ng-click," "Dial," cause that's what this is, has a mapping to each other. You say "Dial" here, which is going to invoke whatever you pass in to "Dial."

Then we'll pass, we'll say "Dial" equals, and we called it "Call Home," so "Dial = Call Home." From there, let's see, I missed something somewhere, app control phone, phone app, oh, that's an attribute, not an element. That's what I do when I write the HTML before I write the JavaScript. The valid isolate scope definition for directive phone.

See, that's what you get for letting me do these live, instead of polishing them up afterwards. All right. We're set here. I put the template inside of the scope on accident, status, stupidity. "Call Home" is going to invoke the controller scope of calling home. What that means is you can do things like having input in here. You can input just some sort of model, I'm able to save value, and then you can send something to that scope by passing in that value.

We're going to call this...I want to say message and value. I needed to use a special syntax where you pass an object into there, so that it can get invoked, the expression can get evaluated that way.

This value is going to go along as the payload. It's going to expect a message. So, in here, this needs to have a message now, and then, in here, this will need to have a message as well. Then we can show the message itself.

Now if I type something in here, put call home, you can see, you can send a message from the phone to the controller, and have basically, no relationship between the two. This Call Home is basically just an API to the controller, or things it can access or know about for the directive to communicate outside of itself.

Even if these scopes are isolated, because, again, if you were to do multiple phone directives, and the scopes are isolated, you'll see the bindings would mess up.

I can type in there, and in here, and here, too, and have the binding working inside of the directive, but they don't impact any of the binding or update inside of the controller because that doesn't happen until you invoke that expression that you're passing along using the inside.

Again, just to review here, we set up a method that we want to call on the scope here called, "Call Home." We set up the relationship by passing it into an attribute called "Dial," passing in a message. That "Dial" is defined here with an "&" sign.

That means that if we invoke "Dial," then pass along an object with a message as the name, and value as the value, then we can pass in whatever value and communicate with the controller from the directive. It's much different from the "=" sign or the "@" sign.

I'll do a review of all three to compare them, but this one is basically communicating back and forth without doing any sort of explicit binding like the "=" sign does. So that's the "&" sign.