Pass function from controller scope to directive isolate scope

Question

I am using AngularJS and am trying to pass a function on my controller's scope to a directive's isolate scope.

I know I have done this before, but am having issues this time.

The function takes two inputs, and logs them to the console.

However, when I pass it to my directive as

<div my-dir my-function="functionName"></div>

or

<div my-dir my-function="functionName()"></div>

And attempt to call it from my directives controller, I actually get a function that takes no arguments and returns my function.

that is, instead of calling

ctrl.functionName(a,b)

I have to call

ctrl.functionName()(a,b)

Any help would be greatly appreciated.

I have seen some reference to syntax like this:

 <div my-dir my-function="functionName({})"></div>

thinkster.io/egghead/isolate-scope-am

Claies
– Claies

2015-10-28 17:09:53 +00:00
Commented Oct 28, 2015 at 17:09 — Claies
– Claies, Commented Oct 28, 2015 at 17:09
Duplicate of stackoverflow.com/questions/18973507/…

Partha Sarathi Ghosh
– Partha Sarathi Ghosh

2015-10-28 17:10:33 +00:00
Commented Oct 28, 2015 at 17:10 — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Oct 28, 2015 at 17:10

Jesse Buitenhuis · Accepted Answer · 2015-10-28 17:11:46Z

2

html:

<div my-dir my-function="functionName()"></div>

directive:

angular.directive('myDir', function() {
  return {
    scope: {
      callback: '&myFunction'
    },
    controller: function($scope) {
      $scope.callback({param1: val1, param2: val2});
  };
});

answered Oct 28, 2015 at 17:11

Jesse Buitenhuis

6704 silver badges11 bronze badges

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

1 Comment

dacox Over a year ago

Using this notation with the parameter dictionary worked. Why is this necessary? Also, I had to pass in the method to the directive with the argument names

ArslanW · Accepted Answer · 2015-10-28 17:24:35Z

0

Try the following code with scope isolation:

angular.module("Demo", [])  
  .controller("ChildCtrl", function($rootScope, $scope) {
    $scope.testFunc = function (a, b) {
        return a + b;
    }
 })
.directive("isoElement", function() {
  return {
    restrict: "E",
    scope: {
        testFunc: '&'
    },
    link: function(scope) {
      console.log(scope.testFunc()(1, 2));
    }
  };
});

Directive usage will be:

<div ng-app="Demo" ng-controller="ChildCtrl">
    <iso-element test-func="testFunc"></iso-element>
</div>

You will need to do scope.testFunc()(..) because scope.testFunc() will return the function itself. IMO this is more understandable than approaching the problem from another side.

answered Oct 28, 2015 at 17:24

ArslanW

3531 silver badge10 bronze badges

2 Comments

dacox Over a year ago

My problem was I didn't understand why I had to call testFunc()(), when testFunc is a function that returns a value, not a function. The correct answer seems to be calling the function from within the directive this notation testFunc({arg1:1,arg2:2})

ArslanW Over a year ago

In that case, "&" passes only the reference and using "=" passes the whole function. When the reference is passed then we need to first get the function itself and then invoke it. On the othe rhand if we use "=" in scope isolation then we get the function itself in the scope and can simply call it.

Collectives™ on Stack Overflow

Pass function from controller scope to directive isolate scope

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related