ng-click attribute on angularjs directive
49,499
Here is updated code. Maybe is this what you were looking for.
Html:
<div data-ng-app="myApp">
<div data-ng-controller="MyController">
<my-directive data-ng-click="myFirstFunction('Hallo')"></my-directive>
<my-directive data-ng-click="mySecondFunction('Hi')"></my-directive>
</div>
</div>
Angular:
var app = angular.module('myApp', []);
app.directive('myDirective', function(){
return {
restrict: 'EA',
replace: true,
scope: {
eventHandler: '&ngClick'
},
template: '<div id="holder"><button data-ng-click="eventHandler()">Call own function</button></div>'
};
});
app.controller('MyController', ['$scope', function($scope) {
$scope.myFirstFunction = function(msg) {
alert(msg + '!!! first function call!');
};
$scope.mySecondFunction = function(msg) {
alert(msg + '!!! second function call!');
};
}]);
Edit
Check solution that I made in jsFiddler is that what you were looking for?
http://jsfiddle.net/migontech/3QRDt/1/
Related videos on Youtube
Author by
Glenn Dejaeger
Updated on July 09, 2022Comments
-
Glenn Dejaeger almost 2 years
I think it should be easy to use the well known angular attributes on a directive out of the box.
For example if the name of my directive is myDirective I would like to use it this way:
<div ng-controller="myController"> <my-directive ng-click="doSomething()"><my-directive> </div>
instead of needing to define a custom click attribute (onClick) as in the example below
<div ng-controller="myController"> <my-directive on-click="doSomething()"><my-directive> </div>
It seems that ng-click can work, but then you need to specify ng-controller on the directive tag too which I don't want. I want to define the controller on a surrounding div
Is it possible to use ng-click on a directive together with a controller defined on a parent html element?
-
Glenn Dejaeger over 11 yearsIt doesn't seem to work... - I still need to provide the ng-controller on my directive
-
migontech over 11 yearsSo you want a function 'doSomthing()' not to be in controller but in your directive?
-
Glenn Dejaeger over 11 yearsI want something like this:
<div ng-controller="MyController"> <my-directive ng-click="myFirstFunction()"></my-directive> <my-directive ng-click="mySecondFunction()"></my-directive> </div>
At this moment I can only achieve this by binding a specific click attribute:app.directive('myDirective', function(){ return { scope: { onClick:'&' } }; });
<button ng-click="onClick()"></button>
-
wmitchell almost 11 yearsI'm a little concerned that this may not be the correct "Angular" way to do this...
-
Carl Sharman over 10 yearsIn AngularJS 1.2 this example now works out of the box without the need for the "eventHandler" business.
-
migontech over 10 yearsCarl, I agree but not all users can update to latest versions :)
-
Max about 4 yearsThis helped me to understand how directives works. Thank you. But I'm stuck on this case: My directive contains 2 buttons to call to separate functions, as opposite as the jsFiddler case where two directives are calling a single function. Maybe its' the limit of the solution.