CODEWITHSUNDEEP
javascriptangularjs
Jonas Hans
Jonas Hans

Reputation: 647

AngularJS: Passing function to directive

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 !!!

Upvotes: 1

Views: 4906

Answers (4)

Prashant
Prashant

Reputation: 8040

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.

Upvotes: 2

ojus kulkarni
ojus kulkarni

Reputation: 1907

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>

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

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

Upvotes: 0

Amir Popovich
Amir Popovich

Reputation: 29836

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.

Upvotes: 0

Related Questions