Pass Object Context Back To Controller Callback From AngularJS Directive

I'm essentially trying to recreate ng-change but add some delay in it (auto-save on change frequency timeout). So far, I have the following directive: myApp.directive('changeDelay'

Solution 1:

Solution

Isolate scope binding should be declared with "&" instead of "=", thus resulting in scope.callBack() executing the updatePerson(person) given function.

Explanations

When isolating a scope, you work with "@", "=" and "&":

• "@" tells angular to watch the result of attribute evaluation against the element scope
• "=" tells angular to build the getter/setter with $parse
• "&" tells angular to bind a function that will evaluate the attribute (and, as an option, provide an extension to the attribute definition scope as an argument to this function call).

So, when you choose this last option "&", it means that calling callBack() on the isolate directive scope will actually call updatePerson(person) againts the outside scope (not extended with any object coming from isolate scope).

Taking the scope extension capability into account, you could have replaced the person argument of the updatePerson(person) by calling scope.callBack({person: {a:1}}). Then person would have been {a:1} in the updatePerson call scope (function scope, not angular scope).