Angular directive function with unknown number of parameters

Question

I would like to use a directive like this :

<my-directive some-method="method(arg0, arg1)"></my-directive>

And the directive looks like :

angular.module('module').directive('myDirective', directive);

   function directive() {
        return {
            restrict:'E',
            scope: {
                someMethod: '&'
            },
            template:'<div ng-click="someMethod()"></div>'
        };
    };

I would like to call method(arg0, arg1) when I call someMethod(). Is it possible ?

Yes, it calls method() but without parameters. So I expect some tricks to make this work — Patrick DAI
– Patrick DAI, Commented Dec 15, 2015 at 14:40
It's possible, but you have to work on your arguments in the function definition. Btw it's not possible the way you do it. — Julo0sS
– Julo0sS, Commented Dec 15, 2015 at 14:45

TheSharpieOne · Accepted Answer · 2015-12-15 14:55:07Z

What you have should work depending on the version of angular you are using. See http://jsfiddle.net/TheSharpieOne/b7btgudo/

Notice that there is no need to bind the arguments. See the console log for the output.

angular.module('app', [])
.controller("myCtrl", myCtrl)
.directive('myDirective', directive);

   function directive() {
        return {
            restrict:'E',
            scope: {
                someMethod: '&'
            },
            template:'<div ng-click="someMethod()">Click Here</div>'
        };
    }

    function myCtrl($scope){
      $scope.myMethod = console.log.bind(console);
      $scope.something = "something";
      $scope.somethingElse = "somethingElse";
    }

Simple HTML:

<div ng-app="app" ng-controller="myCtrl">
 <my-directive some-method="myMethod(something, somethingElse)"></my-directive>
</div>

If you are using ControllerAs syntax, you need to make sure you are putting the 'scoped' functions/vars on this and use the dot-notation in the HTML.

Shaohao · Accepted Answer · 2015-12-15 14:55:52Z

2

You can bind the two parameters as attributes in the template. You can access these two parameters in directive link function. The example below I just display these two parameters in the console.

My suggestion: You don't need to pass the function someMethod, you can define a someMethod function in the directive. Check commented code in the link session.

Directive:

angular.module('module').directive('myDirective', directive);

function directive() {
    return {
        restrict:'E',
        scope: {
            someMethod: '&',
            firstArg: '=',
            secondArg: '=',
        },
        link: function (scope, element, attr) {
          console.log(scope.firstArg);
          console.log(scope.secondArg);

          /*  function someMethod( arg0, arg1) {
           *  implement the someMethod based on your logic.  
           *
           *  }
           */
        },
        template:'<div ng-click="someMethod()"></div>
    };
};

HTML:

<my-directive some-method="method" firstArg="arg0" secondArg="arg1"></my-directive>

edited Dec 15, 2015 at 14:55

answered Dec 15, 2015 at 14:49

Shaohao

3,5297 gold badges28 silver badges45 bronze badges

2 Comments

Patrick DAI Over a year ago

This could works, but in my real case, the number of parameters is unknow. So I could do this on my scope scope : { someMethod:'&', args : '=' } where args is an array of arguments. But I prefer not to do this if possible

Shaohao Over a year ago

Then that's another case, you should mention in the question with unknown number of parameters.

Collectives™ on Stack Overflow

Angular directive function with unknown number of parameters

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related