角双向绑定与方法绑定

Question

Let's assume we got OuterDirective and InnerDirective. InnerDirective is displaying temp which is provided by OuterDirective like:

<outer-directive>
  <inner-directive temp="temp" />
</outer-directive>

1) In inner directive we can set up two way binding: temp: '=' and in inner directive tpl use {{ temp }}

Or

2) we can use method binding "&" like temp: '&' and in inner directive tpl {{ temp() }}

The temp is changing so we need to update inner directive.

• Is the second method proper at all?
• Which one would be better in terms of resources ?

Answer 1

Well, in the first case, temp can be an arbitrary variable which is provided by the OuterDirective 's scope. The = means that updating that value in the InnerDirective 's scope will update it as well in the OuterDirective 's scope.

The second case is possible, you can pass everything you want, one-way, to an attribute marked by & .

Using temp in both inner and outer scope is a bit confusing, so I'm going to use outer and inner instead.

Let's suppose outer() is a function defined in your outer scope, returning an arbitrary result you want to display in your directive and inner is your inner directive attribute.

<outer-directive>
   <inner-directive inner="{{outer()}}" />
</outer-directive>

This will work like a charm if you want one-way binding. The confusing part is that & attributes need {{}} to bind to a value, when = attributes don't.

Now you can use

<div>{{inner}}</div>

directly.

You can also pass your outer function so that it is called inside your inner directive, but that's a bit trickier.

If you want to know more about this, I recommand you read the "Creating a Directive that Wraps Other Elements" in Angular's documentation about directives , there is a very good example of what it can do at the end of the section (you want to look at the very last example).

Here is a brief excerpt :

We saw earlier how to use =attr in the scope option, but in the above example, we're using &attr instead. The & binding allows a directive to trigger evaluation of an expression in the context of the original scope, at a specific time. Any legal expression is allowed, including an expression which contains a function call. Because of this, & bindings are ideal for binding callback functions to directive behaviors.

Best Practice: use &attr in the scope option when you want your directive to expose an API for binding to behaviors.