Creating single custom directive for ng-click to p

Question

I have the following code:

<div>...
    <div class="glyphicon glyphicon-filter ng-click="vm.add()" tabindex="1">
    <a href='' tabindex="2"><img id="touch" ng-click="vm.multiply(xyz)" 
    src="/ui/assets/images/xxx.png"/></a> 
    <div class="glyphicon glyphicon-filter"ng-click="vm.showId()" tabindex="1" title="Filter">
    </div>
..</div>  

I want to create a custom single ng-click directive as its recommended for div (ng-click to be used for only buttons). I want to know if there is any way I can create a single directive for all 3 ng-click and call those 3 different functions in link at $apply?

Answer 1

Here you go: http://jsfiddle.net/psevypcs/2/

HTML

<div clicky="test()">test</div>
<div clicky="test2()">test2</div>

AngularJS-Controller

$scope.test = function(){
       alert('hy');
   };


$scope.test2 = function(){
       alert('hy2');
   };

AngularJS-Directive

angular.module('myApp')
        .directive('clicky', Clicky);

    function Clicky() {
        return {
            restrict: 'A',
            scope: {
                clicky: '&'  // Take yourself as variable
            },
            link: function(scope, element, attrs){
               $(element).on('click', function(e) {
                  scope.clicky();
               });
            }
      };
    }