Directive delegated function in directive controller doesn't pass parameters?

[Jaymes Bearden]

Hi folks!

So I have a directive that has some parameters bound in the scope like so:

scope: {

 aVar: '=',

 bVar: '&'

}

I also have a controller attached to the directive. This directive is contained within a controller which passes a value and a function to the directive. In the directive's controller, I call $scope.bVar(...) with a parameter. The problem is that the parameter is does not seem to be passed back through the delegate to the function.

Please see this jsfiddle: http://jsfiddle.net/QM69A/8/

Why doesn't this work? Should I go about this in a different fashion?

Thanks!!

[Jaymes Bearden]

After some searching, I found the fix to pass parameters to a delegated function in a directive. I don't believe this is clearly explained / documented, so hopefully this will help someone out.

See this jsfiddle: http://jsfiddle.net/QM69A/9/ (note the information in the console log).

The problem was that I had to include a parameter name in the directive tag (b-var="testFunc(aParamName)") and then call the delegate with an object map containing key/value pairs of parameter names to data mappings in the directive controller ($scope.bVar({aParamName: "a value"})).

Here is the blog that helped me along the way http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/ and its associated jsfiddle: http://jsfiddle.net/simpulton/VJ94U/ .

[Jaymes Bearden]

Annnnnd, I eat my words.

It is clearly explained here: http://docs.angularjs.org/guide/directive

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the local name and attribute name are same. Given <widget my-attr="count = count + value"> and widget definition of scope: { localFn:'increment()' }, then isolate scope property localFn will point to a function wrapper for the increment() expression. Often it's desirable to pass data from the isolate scope via an expression and 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 aslocalFn({amount: 22}).

This is not very intuitive. Could the doc maintainers maybe bold the above point or reword it? It would be nice if we could just call the delegate function with params by order ...

[Kalyani]

thanks a lot. Much needed post!

[chriso...@gmail.com]

Thanks for posting this, have been trying to work it out for ages.

[Eugene OZ]

Thank you very much. It was easier to find your message than read whole documentation and not forget some details )

[Aaron Freeland]

Post saved me a lot of time and frustration, much appreciated =)

[Fredrik Boström]

Thanks! This is not explained at all in the current docs, so I had to search around quite a bit to find the solution. 

[Andrew Williams]

Check out this article (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters) and see Option 2 where you do not need to match the parameter name. much slicker.

[might...@gmail.com]

Thank you very much!