Tip:
Highlight text to annotate it
X
So the "&" sign allows you to invoke an expression, or call
an expression, and evaluate an expression-- whatever--
on the parent scope of whatever the directive's going
to be inside of.
So 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.
So say we have a function here, called callHome.
And we'll say, "called home!" From our directive, we would
just 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:"&." And then in our
template, what we're going to do is create a button that we
can click to call home.
So div.button.
And then, Call home!
And then, I want to say ng-click="dial()," because
that's what this is.
This is kind of mapping to each other.
You say "dial()" here, which is going to invoke whatever
you pass into dial.
And then we'll pass--
we'll say "dial"=, and we called it "callHome()"--
so dial="callHome()." So from there--
see I missed something somewhere--
control from your phone app.
Oh, that's an attribute, not an element.
So it's what I do for when I write the HTML before I write
the JavaScript.
Invalid isolate scope definition
for directive phone.
Yeah, see, that's what you get for letting me do these live
instead of polishing them up afterwards.
All right.
So we're set here.
I put the template inside of the scope by accident, just
out of stupidity.
So Call home!
Is going to invoke the controller
scope of calling home.
So what that means is you can do things like
have an input in here.
You can have input, which has some sort of model--
I think we'll just say "value." And then we can send
something to that scope by passing in that value.
And we're going to call this--
I want to say--
message:value.
I need to use a special syntax where you pass an object in to
there so that it can get invoked.
The expression can get evaluated that way.
So this "value" is going to go along as the payload.
It's going to expect the message.
So in here, this needs to have a message now.
And then in here, this will need to have
a message, as well.
And then we can show the message itself.
So now if I type something in here, click Call home!
You can see, you can send the message from the "phone" to
the controller and have, basically, no relationship
between the two.
This callHome is, basically, just kind of an API to the
controller--
there are 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
weren't isolated, some of the bindings would mess up.
So I can type--
so in there, and then in here, and here, too--
and have the binding-- the working inside of the
directive--
but they don't impact any of the bindings or update inside
of the controller because that doesn't happen until you
invoke that expression that you're passing along
using the "&" sign.
So again, just to review here, we set up a method that we
want to call on the scope here, called callHome.
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.
And that means that if we invoke "dial," then pass along
an object with a message as the name, and then value as
the value, then we can pass in whatever "value" and
communicate with the controller from the directive.
So 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.
So that's the "&" sign.