Can an angular directive pass arguments to functions in expressions specified in the directive s attributes

Question

I have a form directive that uses a specified callback attribute with an isolate scope   scope    callback    amp       It sits inside an ng-repeat so the expression I pass in includes the id of the object as an argument to the callback function    lt directive ng-repeat    item in stuff  callback    callback item id    gt    When I ve finished with the directive  it calls  scope callback   from its controller function  For most cases this is fine  and it s all I want to do  but sometimes I d like to add another argument from inside the directive itself   Is there an angular expression that would allow this   scope callback arg2   resulting in callback being called with arguments    item id  arg2    If not  what is the neatest way to do this    I ve found that this works    lt directive    ng-repeat    item in stuff     callback    callback     callback-arg  item id   gt    With  scope   callback       callbackArg          and the directive calling    scope callback apply null    scope callbackArg  concat  arg2  arg3        But I don t think it s particularly neat and it involves puting extra stuff in the isolate scope   Is there a better way   Plunker playground here  have the console open

User · Accepted Answer

If you declare your callback as mentioned by @lex82 like

callback = "callback(item.id, arg2)"

You can call the callback method in the directive scope with object map and it would do the binding correctly. Like

scope.callback({arg2:"some value"});

without requiring for $parse. See my fiddle(console log) http://jsfiddle.net/k7czc/2/

Update: There is a small example of this in the documentation:

& or &attr - provides 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 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 as localFn({amount: 22}).

User · Answer

Nothing wrong with the other answers  but I use the following technique when passing functions in a directive attribute   Leave off the parenthesis when including the directive in your html    lt my-directive callback  someFunction    gt    Then  unwrap  the function in your directive s link or controller  here is an example   app directive  myDirective   function          return           restrict   E           scope                callback    amp                                                    template    lt div ng-click  callback data   gt  lt  div gt       call function this way            link  function scope  element  attrs                   unwrap the function             scope callback   scope callback                  scope data    data from somewhere                element bind  click  function                     scope  apply function                         callback data                                or this way                                                                The  unwrapping  step allows the function to be called using a more natural syntax  It also ensures that the directive works properly even when nested within other directives that may pass the function  If you did not do the unwrapping  then if you have a scenario like this    lt outer-directive callback  someFunction   gt       lt middle-directive callback  callback   gt           lt inner-directive callback  callback    gt       lt  middle-directive gt   lt  outer-directive gt    Then you would end up with something like this in your inner-directive    callback       data      Which would fail in other nesting scenarios   I adapted this technique from an excellent article by Dan Wahlin at http   weblogs asp net dwahlin creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters  I added the unwrapping step to make calling the function more natural and to solve for the nesting issue which I had encountered in a project

User · Answer

In directive  myDirective        directive scope           boundFunction    amp        model              return directive    In directive template    lt div  data-ng-repeat  item in model    data-ng-click  boundFunction  param  item    gt    item myValue    lt  div gt    In source    lt my-directive  model  myData   bound-function  myFunction param   gt   lt  my-directive gt       where myFunction is defined in the controller   Note that param in the directive template binds neatly to param in the source  and is set to item     To call from within the link property of a directive   inside  of it   use a very similar approach       directive link   function isolatedScope        isolatedScope boundFunction  param   foo            return directive

User · Answer

For me following worked   in directive declare it like this    directive  myDirective   function         return           restrict   E           replace  true          scope                myFunction                          templateUrl   myDirective html                In directive template use it in following way    lt select ng-change  myFunction selectedAmount   gt    And then when you use the directive  pass the function like this    lt data-my-directive     data-my-function  setSelectedAmount  gt   lt  data-my-directive gt    You pass the function by its declaration and it is called from directive and parameters are populated

User · Answer

Yes  there is a better way  You can use the  parse service in your directive to evaluate an expression in the context of the parent scope while binding certain identifiers in the expression to values visible only inside your directive    parse attributes callback  scope  parent    arg2  yourSecondArgument       Add this line to the link function of the directive where you can access the directive s attributes   Your callback attribute may then be set like callback    callback item id  arg2   because arg2 is bound to yourSecondArgument by the  parse service inside the directive  Directives like ng-click let you access the click event via the  event identifier inside the expression passed to the directive by using exactly this mechanism   Note that you do not have to make callback a member of your isolated scope with this solution

[javascript] Can an angular directive pass arguments to functions in expressions specified in the directive's attributes?

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angularjs-scope