Passa automaticamente $ event con ng-clic?

So che posso accedere all’evento click da ng-click se passo nell’object $event modo:

   function myFunction (event) { typeof event !== "undefined" // true }  

È un po ‘fastidioso dover passare $event esplicitamente ogni volta. È ansible impostare ng-click per passare in qualche modo alla funzione per impostazione predefinita?

Dai un’occhiata all’origine direttiva ng-click :

 ... compile: function($element, attr) { var fn = $parse(attr[directiveName]); return function(scope, element, attr) { element.on(lowercase(name), function(event) { scope.$apply(function() { fn(scope, {$event:event}); }); }); }; } 

Mostra come l’object event viene passato all’espressione ng-click , usando $event come nome del parametro. Ciò viene eseguito dal servizio $ parse, che non consente il sanguinamento dei parametri all’interno dell’ambito di destinazione, il che significa che la risposta è no , non è ansible accedere all’object $event altro modo se non attraverso il parametro callback.

Aggiungi un $event al ng-click , ad esempio:

  

Quindi jQuery.Event stato passato al callback:

inserisci la descrizione dell'immagine qui

Come altri hanno detto, in realtà non puoi fare rigorosamente ciò che stai chiedendo. Detto questo, tutti gli strumenti disponibili per il framework angular sono effettivamente disponibili anche per te! Ciò significa che puoi effettivamente scrivere i tuoi elementi e fornire questa funzionalità da solo. Ho scritto uno di questi come esempio che puoi vedere al seguente plunkr ( http://plnkr.co/edit/Qrz9zFjc7Ud6KQoNMEI1 ).

Le parti fondamentali di questo sono che definisco un elemento “cliccabile” (non farlo se hai bisogno del supporto IE più vecchio). Nel codice che assomiglia a:

  

Hello World!

Quindi ho definito una direttiva per prendere questo elemento cliccabile e trasformarlo in ciò che voglio (qualcosa che imposta automaticamente il mio evento click):

 app.directive('clickable', function() { return { transclude: true, restrict: 'E', template: '
' }; });

Finalmente nel mio controller ho l’evento click pronto per partire:

 $scope.handleClick = function($event) { var i = 0; }; 

Ora, vale la pena dichiarare che questo hard codifica il nome del metodo che gestisce l’evento click. Se vuoi eliminare questo, dovresti essere in grado di fornire alla direttiva il nome del tuo gestore di clic e “tada” – hai un elemento (o attributo) che puoi usare e non devi mai inserire di nuovo “$ evento”.

Spero possa aiutare!

Non consiglierei di farlo, ma è ansible sovrascrivere la direttiva ngClick per fare ciò che si sta cercando. Questo non sta dicendo, dovresti.

Con l’implementazione originale in mente:

 compile: function($element, attr) { var fn = $parse(attr[directiveName]); return function(scope, element, attr) { element.on(lowercase(name), function(event) { scope.$apply(function() { fn(scope, {$event:event}); }); }); }; } 

Possiamo farlo per sovrascriverlo:

 // Go into your config block and inject $provide. app.config(function ($provide) { // Decorate the ngClick directive. $provide.decorator('ngClickDirective', function ($delegate) { // Grab the actual directive from the returned $delegate array. var directive = $delegate[0]; // Stow away the original compile function of the ngClick directive. var origCompile = directive.compile; // Overwrite the original compile function. directive.compile = function (el, attrs) { // Apply the original compile function. origCompile.apply(this, arguments); // Return a new link function with our custom behaviour. return function (scope, el, attrs) { // Get the name of the passed in function. var fn = attrs.ngClick; el.on('click', function (event) { scope.$apply(function () { // If no property on scope matches the passed in fn, return. if (!scope[fn]) { return; } // Throw an error if we misused the new ngClick directive. if (typeof scope[fn] !== 'function') { throw new Error('Property ' + fn + ' is not a function on ' + scope); } // Call the passed in function with the event. scope[fn].call(null, event); }); }); }; }; return $delegate; }); }); 

Quindi passeresti le tue funzioni in questo modo:

 

al contrario di:

 

jsBin : http://jsbin.com/piwafeke/3/edit

Come ho detto, non consiglierei di farlo, ma è una dimostrazione del concetto che ti mostra che, sì, puoi in effetti sovrascrivere / estendere / aumentare il comportamento angular incorporato per soddisfare le tue esigenze. Senza dover scavare in profondità nell’implementazione originale.

Si prega di usarlo con cura, se si dovesse decidere di percorrere questa strada (è comunque molto divertente).