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, Jan 25 '16 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, Jan 25 '16 at 13:04

Prashant · Accepted Answer · 2016-01-25T13:04:23.790

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.

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 — Jonas Hans, Jan 25 '16 at 12:58

score 0 · Answer 2 · answered Jan 25 '16 at 11:15

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 '16 at 11:15

Amir Popovich

29,350
9
53
99

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, – Jonas Hans Jan 25 '16 at 12:50

RIYAJ KHAN · Answer 3 · 2016-01-25T11:47:52.067

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
  }
});

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 — Jonas Hans, Jan 25 '16 at 12:52

score 0 · Answer 4 · answered Jan 25 '16 at 12:11

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>

AngularJS: Passing function to directive

4 Answers4