Correct usage of & binding in directives

问题

This has come up for me in answers and generated some discussion and I'd like to figure out if I'm way off base or if there is a "more angular" way to accomplish my goal.

When I write a directive that is going to use an isolated scope, a question that comes up is always =, & or @.

Generally, people always think of & as a way to pass functions to directive. The documentation describes it as:

a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localFn:'&myAttr' }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).

I use it for passing functions quite a bit, but I also use it in cases where I want to pass an expression that returns a non-string, and I don't want my directive to be able to modify values in the parent scope. In other words, I use it as:

a way to execute an expression in the context of the parent scope

So if I do not need two-way binding, and the expression is not a string, I will do this:

.directive('displayObject', function() {

    scope: {
        value: '&=displayObject'
    },
    template: '<div ng-repeat="(k, v) in value()">{{k}}: {{v}}</div>',
    replace: true,
    ...
});

The directive usage would be:

<div displayObject="someScopePropertyOrExpression"></div>

= isn't ideal here because I do not need two way binding. I don't want my directive modifying the value in the parent scope and I don't want the watch required to maintain it.

@ isn't ideal because it interpolates the attribute, so value would always be a string.

::someScopePropertyOrExpression doesn't work because I want the directive template to reflect changes in someScopePropertyOrExpression if it changes.

In each discussion, it's always brought up that

ng-repeat="(key, value) in value()"

sets up a watch - the problem is that = and the template together set up two - one that is wholly unnecessary.

Several times when I've suggested this pattern it's been called a "hack", or a misuse of &, and even "ugly".

I don't think it is any of these, but if it is, then my specific question is what is the alternative?

回答1:

I've searched quite a bit to prove you wrong in our discussion here, but I think you are right - this is the only way to set up a one-way (from parent to isolate scope) binding to an actual model.

In that aspect "&" is superior to "=", because, as you noted, "=" sets up a watch on the parent's scope whereas "&" does not.

One thing - plunker 1 - (that I finally managed to uncover) that hints on it being a hack is that it does not play nice with Angular's one-time binding foo="::name":

"=" will honor the one-time binding (it sets up a watch on the parent and removes it before the next digest), whereas "&" would not:

<input ng-model="name">
<div two-way="::name">
<div one-way="::name">

The other thing - plunker 2 - is that "&" allows to pass local variables, and they may shadow outer variables:

<input ng-model="name">
<div one-way="name">

But in the directive if you did something like: "{{oneWay({name: 'fooo'})}}", it will cause it to display "fooo", rather than take the value of name from the outer scope. It's a bit like shooting yourself in the foot, yes, but it does hint that this usage might be slightly outside of its original intent.

来源：https://stackoverflow.com/questions/28978304/correct-usage-of-binding-in-directives