AngularJS Directive expression binding with `"&"` function with parameters

Question

I am developing a multiple selection directive, similar to the isteven directive for AngularJs. What I can't solve is that I want to include callback functions, that can pass parameters, that reach their respective function in the controller. For this, use the "&" operator, but for example, if I want an object to be seen in the console, only "undefined" is displayed.

I leave an example:

Template Html:

<li ng-repeat="data in inputData">
      <span ng-click="onItemClick()">{{data.name}}</span>
</li>

JS(directive):

debFrontApp.directive('debSelect', function () {
    return {
      restrict: "AE",
      transclude: true,
      templateUrl: function (element, attrs) {
        if(!attrs.basePath){
          attrs.basePath = "/assets/debfront";
        }
        return attrs.basePath + "/templates/debselect.html";
      },
      scope: {
        multiSelect: '=',
        selectName: '@',
        inputData: '=inputData',
        outputData: '=outputData',
        onItemClick: '&'
      }
    };
});

JS (controller)

$scope.testfuctionBye = function(data){
    console.log(data);
};

This function returns an undefined value. Some help? Thank you!

Where are you using the directive? how do you pass the arguments? — Eduardo Yáñez Parareda, Jul 31 '19 at 14:05
Would be great, if you create some minimal reproducible example on https://stackblitz.com/ or somewhere else. It would be easier for us to help you — Sergey Mell, Jul 31 '19 at 14:15

score 0 · Answer 1 · answered Jul 31 '19 at 14:15

With expression binding one needs to use a locals object:

<li ng-repeat="data in inputData">
      <span ng-click="onItemClick({$event: data})">{{data.name}}</span>
</li>

Usage:

<deb-select on-item-click="vm.onClick($event)" input-data="vm.dataArr">
</deb-select>

When the expression binding is invoked, the locals object defines the value of $event.

From the Docs:

& 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 <my-component my-attr="count = count + value"> and the isolate scope definition scope: { localFn:'&myAttr' }, the 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}).

For more information, see

AngularJS Comprehensive Directive API Reference - scope

AngularJS Directive expression binding with `"&"` function with parameters

1 Answers1