angular click directive

by slawe

HTML

<div ng-app="app">
  <div ng-controller="ctrl">
    <div>
      <h3 ng-click="func"> clickety </h3>
    </div>
  </div>
</div>

JavaScript

var deps = [];
var app  = angular.module('app', deps);

app.config(function ($provide) {
  $provide.decorator('ngClickDirective', function ($delegate, $parse) {
    var directive   = $delegate[0];
    var origCompile = directive.compile;

    directive.compile = function (el, attrs) {
      origCompile.apply(this, arguments);
     
      return function (scope, el, attrs) {
        var fn = attrs.ngClick;
       
        el.on('click', function (event) {
          scope.$apply(function () {
            if (!scope[fn]) {
              return;
            }
            
            if (typeof scope[fn] !== 'function') {
              throw new Error('You misusing me?');
            }
            
            scope[fn].call(scope, event);
          });
        });          
      };
    };    
    
    return $delegate;
  });
});

app.controller('ctrl', function ($scope) {
  
  $scope.func = function (e) {
  	alert(e.target.innerHTML);
    console.log(this);
    console.log(e);
  };

});