Angularjs directive create click event

Question

I have simple directive, like this:

 angular.module('docsTemplateUrlDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; $scope.clicke = function(){ alert('test'); }; }]) .directive('myCustomer', function() { return { templateUrl: 'my-customer.html' }; });

index.html

<div ng-controller="Controller"> <div my-customer click-event='clicke()'></div> </div>

my-customer.html

Name: {{customer.name}} Address: {{customer.address}} <button>click</button>

and I would like create event for click to button, and after it in my controller use this event. But I don't know how to do it. Help me pls. Thanks a lot.

Is the entire directive supposed to be clickable? As in, is it an element directive? — ellitt
– ellitt, Commented Mar 23, 2016 at 22:56

Josh Beam · Accepted Answer · 2016-03-24 00:01:40Z

1

I would suggest using something Angular already gives you: ng-click.

Here's a JSBin example that I did for you:

<div ng-controller="Controller"> <div my-customer ng-click='clicke()'></div> </div>

If you click on the directive, it should look like this:

answered Mar 24, 2016 at 0:01

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

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

1 Comment

Taras Kovalenko Over a year ago

ok, thanks but if I need use more elements and get some id or name after click. I would like use directive like tab menu and dynamic build it. And after click to some item (1,3 .. xxx) get him id. And I don't know how to do it.

Maxwelll · Accepted Answer · 2016-03-24 02:42:19Z

You can use ng-repeat to iterate over an array of customers and then have your ng-click function take parameters assocaited to which customer (index in the array) is being displayed...

<div ng-repeat="customer customers track by $index" ng-click="myClickHandler(index)"> {{customer}} </div>

Sumit Deshpande · Accepted Answer · 2016-03-24 15:39:21Z

I would suggest following solution. A working example can be found at - @sumit Plunker
Here's a code sample:

angular.module('docsTemplateUrlDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; $scope.clicke = function(evt) { alert('test'); }; }]) .directive('myCustomer', function($parse) { return { restrict: 'A', scope: true, templateUrl: 'my-customer.html' } }) .directive('clickEvent', function($parse) { return { restrict: 'A', scope: true, link: function(scope, el, attrs) { var expressionHandler = $parse(attrs.clickEvent) el.find('#btnSubmit').on('click', function(e) { expressionHandler(scope); }) } } });

Collectives™ on Stack Overflow

Angularjs directive create click event

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related