AngularJS - Aggiunta di un evento onClick a un pulsante tramite una direttiva

Question

Vorrei aggiungere un evento click a un elemento con una direttiva. La parte importante è non definire il pulsante o il collegamento ipertestuale o qualsiasi altra cosa nella direttiva, ma solo l'attributo onClick e la funzione, che è chiamata.

Quindi il codice HTML sembra qualcosa di simile:

<button my-dir type="button" class="btn btn-primary">test</button> 

mia direttiva si presenta così:

.directive('myDir', function(){ 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function(scope, element, attrs) { 

      scope.functionToBeCalled = function(){ 
       console.log("It worked!"); 
      } 
     } 
    } 
}) 

Ho provato ad aggiungere un "click" come questo:

element.bind('click',scope.functionToBeCalled()); 

Sfortunatamente ciò richiama la funzione una volta quando viene chiamato il collegamento, ma non quando si fa clic sul pulsante. Penso che devo usare compilare piuttosto che collegare e spostare la funzione ToBeCalled nella funzione restituita da compilare. Purtroppo non so come farlo.

Grazie per il vostro aiuto!

Answer 1

Dovrebbe essere come questo:

.directive('myDir', function() { 
    return { 
     restrict: 'A', 
     scope: true, 
     link: function (scope, element, attrs) { 

      function functionToBeCalled() { 
       console.log("It worked!"); 
      } 

      element.on('click', functionToBeCalled); 
     } 
    }; 
}); 

La linea del tuo element.bind('click', scope.functionToBeCalled()) non è corretto, perché si vuole passare riferimento alla funzione, non è il risultato della sua immediata invocazione (cosa succede se si mette () dopo la funzione nome).