title: AngularJS - Adding an onClick event to a Button via a Directive
body: <p>I'd like to add a click event to an element with a directive. The important part is to not define the button or hyperlink or whatever in the directive but only the onClick attribute and the function, that is called.</p>
  
  <p>So the HTML looks something like this:</p>
  
  <pre><code>&lt;button my-dir type="button" class="btn btn-primary"&gt;test&lt;/button&gt;
  </code></pre>
  
  <p>My directive looks like this:</p>
  
  <pre><code>.directive('myDir', function(){
     return {
         restrict: 'A',
         scope: true,
         link: function(scope, element, attrs) {
  
             scope.functionToBeCalled = function(){
                 console.log("It worked!");
             }
         }
     }
  })
  </code></pre>
  
  <p>I have tried adding a "click" like this:</p>
  
  <pre><code>element.bind('click',scope.functionToBeCalled());
  </code></pre>
  
  <p>Unfortunately this calls the function once when link is called, but not when the button is clicked. I think I have to use compile rather than link and move the functionToBeCalled into the function returned by compile. Sadly I don't know how to accomplish that.</p>
  
  <p>Thanks for your help!</p>