Passing function to angular directive with a varying amount of parameters

Question

I have a function I want to pass to a directive. The directive is used in two places, however, and at the first place the function takes two parameters, the second place it only takes one parameter:

Function1(param1)

Function2(param1, param2)

I only have access to param1 in the directive. How do I modify Function2 so that it returns Function1? I have thought about changing the implementation of Function2 to the following:

Function2(param2) { 
 return function(param1) {
    //do something with param2
 }

}

And passing it to the directive like this:

 function="Function2(param2)"

However, this causes the Angular digest cycle to go into an infinite loop. How can I resolve this issue?

Tomer · Accepted Answer · 2016-06-08 15:28:56Z

1

First of all, i wouldn't use function as an attribute name, since it's a reserved word. You can add another attribute on the scope like: function-params="[param1, param2]"

so the element will look like this:

<my-directive func="myFunction" function-params="[param1, param2]"></my-directive>

Then, in the directive you'll call it using apply:

angular.module('app').directive('myDirective', {
  ...
  scope: {
     func: '=',
     functionParams: '='
  },
  link: function(scope){
      scope.func.apply(null, scope.functionParams);
  }
});

answered Jun 8, 2016 at 15:28

Tomer

17.9k17 gold badges82 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Soggiorno Over a year ago

Thank you, that's a lot more clean.

Soggiorno · Accepted Answer · 2016-06-08 15:16:27Z

0

I solved this issue by using a workaround where I pass param2 into the directive scope, along with a boolean indicating whether the function passed into the directive is Function1 or Function2. If Function1, call the passed in function, let's call it passed_in_function, like this:

  passed_in_function(param1)

If Function 2, call it like this:

 passed_in_function(param1, param2)

Ugly, but works. I'm sure someone can provide a better solution though.

answered Jun 8, 2016 at 15:16

Soggiorno

7749 silver badges18 bronze badges

Collectives™ on Stack Overflow

Passing function to angular directive with a varying amount of parameters

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related