AngularJS: Passing function to directive

Question

I got a problem by passing a function to a directive ( familiar to this post: AngularJS - pass function to directive but i can´t get it working)

Here is my Code:

Directive:

.directive('testdirective', function(){
  return{
    restrict: 'E',
    scope: {
      onClick: '&'
    },
    controller: 'TestController',
    controllerAs: 'tc',
    bindToController: true,
    template: '<div><button ng-click="onClick()">What UP</button></div>',
    replace: true
  }
})

Controller:

  TestController.$inject = ["$scope"];
  function TestController($scope) {
    $scope.testFunction = function(){
      alert("I´m the alert of the TestContoller");
    };
    $scope.test = 'test';
  }

HTML:

<div>
  <testdirective on-click="testFunction()"></testdirective>
</div>

What I want sounds very simple, I just want to pass the function to the directive and execute it with the ng-click on the button.

For me my code looks exactly like this fiddle but mine is not working :/

Would be awesome if someone got some hints for me.

EDIT

My directive will need his own controller !

Later the function to be passed in will come from another controller !!!

The working JSFiddle has the controller outside the directive. Your code has the controller inside the directive. Your directive uses an isolate scope. Functions on the scope outside will not be inherited by the scope inside. — georgeawg
– georgeawg, Commented Jan 25, 2016 at 13:01
But I need a own controller for my directive. Later the function to be passed in will come from another controller !!! For Example I got a TestController2 with a function and this function i´ll pass to my directive and execute by ng-click — Jonas Hans
– Jonas Hans, Commented Jan 25, 2016 at 13:04

Prashant · Accepted Answer · 2016-01-25 13:04:23Z

2

The fiddle is not the same as your code.

You have set the controller of your directive to be "TestController". I assume what you wanted to do was:

.directive('testdirective', function(){
    return{
        restrict: 'E',
        scope: {
            onClick: '&'
        },
        template: '<div><button ng-click="onClick()">What UP</button></div>',
        replace: true
    }
});

and in your HTML,

<div ng-controller="TestController">
  <testdirective on-click="testFunction()"></testdirective>
</div>

EDIT: Based on OP's comment

app.directive('testdirective', function(){
        return{
            restrict: 'E',
            scope: {
                onClick: '&'
            },
            template: '<div><button ng-click="tc.onClick()">What UP</button></div>',
            replace: true,
            controller: 'TestController',
            controllerAs: 'tc',
            bindToController: true
        }
    });

    app.controller('TestController', function ($scope) {
        console.log($scope);
    }) ;

    app.controller('AnotherController', function ($scope) {
        $scope.testFunction = function(){
            alert("I´m the alert of the TestContoller");
        };

        $scope.test = 'test';
    });

And, your HTML

<div ng-controller="AnotherController">
    <testdirective on-click="testFunction()"></testdirective>
</div>

You are telling the directive to bindToController. So within the directive's template, onClick is bound to the controller and not the scope. So, you access the onclick via the controller as tc.onClick() in the directive's template.

edited Jan 25, 2016 at 13:04

answered Jan 25, 2016 at 11:11

Prashant

8,1503 gold badges27 silver badges25 bronze badges

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

1 Comment

Jonas Hans Over a year ago

Thanks that much. The problem is, that I need my own controller to calculate some data (later)---> so i need: controller: 'TestController', controllerAs: 'tc', bindToController: true, Later the function should be passed in from another Controller

Amir Popovich · Accepted Answer · 2016-01-25 11:15:17Z

0

You may want to pass a method as a reference:

1.Pass the function as a reference and not a call:

<div>
  <testdirective on-click="testFunction"></testdirective>
</div>

2.Update the directive:

.directive('testdirective', function(){
    return{
        restrict: 'E',
        scope: {
            onClick: '='
        },
        template: '<div><button ng-click="onClick()">What UP</button></div>',
        replace: true
    }
});

JSFIDDLE.

answered Jan 25, 2016 at 11:15

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

1 Comment

Jonas Hans Over a year ago

Thanks that much. The problem is, that I need my own controller to calculate some data (later)---> so i need: controller: 'TestController', controllerAs: 'tc', bindToController: true,

RIYAJ KHAN · Accepted Answer · 2016-01-25 11:47:52Z

0

Well, in your testdirective,you defined controller TestController. The testFunction() that you try to calling via onClick directive scope parameter is defined in controller TestController which is directive controller. So, rather than calling via onClick you can call directly like

template: '<div><button ng-click="testFunction()">What UP</button></div>'.

Its very confusing ,you defining controller in directive and again referring it's one function via same directive's scope parameter which look like recursive.

If you want to call via directive scope parameter then you should do belowe changes.

for e.g. JS :

<div ng-controller="TestController" ng-app="dr">
  <testdirective on-click="testFunction()"></testdirective>
</div>

 app.directive('testdirective', function() {
    return{
    restrict: 'E',
    scope: {
      onClick: '&'
    }, 
    template: '<div><button ng-click="onClick()">What UP</button></div>',
    replace: true
  }
});

edited Jan 25, 2016 at 11:47

answered Jan 25, 2016 at 11:40

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

1 Comment

Jonas Hans Over a year ago

Thanks that much. The problem is, that I need my own controller to calculate some data (later)---> so i need: controller: 'TestController', controllerAs: 'tc', bindToController: true, Later the function should be passed in from another Controller

ojus kulkarni · Accepted Answer · 2016-01-25 12:11:03Z

0

Directivie:

.directive('testdirective', function(){
return{
restrict: 'E',
scope: {
  onClick: '=onClick'
},
controller: 'TestController',
controllerAs: 'tc',
bindToController: true,
template: '<div><button ng-click="onClick()">What UP</button></div>',
replace: true
}
})

use '=' instead of '&' so you can fetch the html function in your directive. and you can simply pass onClick parameter through HTML HTML:

<div>
<testdirective on-click="testFunction()"></testdirective>
</div>

answered Jan 25, 2016 at 12:11

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

Collectives™ on Stack Overflow

AngularJS: Passing function to directive

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related