javascript - data - ng click angular 4

Pasa automáticamente $ evento con ng-click?

Question

Sé que puedo obtener acceso al evento click desde ng-click si paso el objeto $event así:

<button ng-click="myFunction($event)">Give me the $event</button>
<script>
function myFunction (event) {
typeof event !== "undefined" // true
}
</script>

Es un poco molesto tener que pasar el $event explícitamente cada vez. ¿Es posible configurar ng-click para pasarlo de alguna manera a la función por defecto?

Answer 1

Agregue un $event al ng-click , por ejemplo:

<button type="button" ng-click="saveOffer($event)" accesskey="S"></button>

Entonces el jQuery.Event fue pasado a la devolución de llamada:

Answer 2

Como han dicho otros, no puedes hacer estrictamente lo que estás pidiendo. Dicho esto, todas las herramientas disponibles para el marco angular también están disponibles para usted. Lo que eso significa es que puedes escribir tus propios elementos y proporcionarte esta característica. Escribí uno de estos como un ejemplo que puede ver en el siguiente plunkr ( http://plnkr.co/edit/Qrz9zFjc7Ud6KQoNMEI1 ).

Las partes clave de esto son que defino un elemento "pulsable" (no hagas esto si necesitas soporte de IE más antiguo). En el código que parece:

<clickable>
<h1>Hello World!</h1>
</clickable>

Luego definí una directiva para tomar este elemento pulsable y convertirlo en lo que quiero (algo que configura automáticamente mi evento de clic):

app.directive(''clickable'', function() {
return {
transclude: true,
restrict: ''E'',
template: ''<div ng-transclude ng-click="handleClick($event)"></div>''
};
});

Finalmente en mi controlador tengo el evento click listo para funcionar:

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

Ahora, vale la pena indicar que este código codifica el nombre del método que controla el evento de clic. Si desea eliminar esto, debe poder proporcionar a la directiva el nombre de su controlador de clic y "tada": tiene un elemento (o atributo) que puede usar y nunca más debe volver a inyectar "$ event".

¡Espero que ayude!

Answer 3

Eche un vistazo a la fuente de la directiva 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});
});
});
};
}

Muestra cómo se pasa el objeto de event a la expresión ng-click , usando $event como nombre del parámetro. Esto se realiza mediante el servicio $ parse, que no permite que los parámetros se desangren en el ámbito objetivo, lo que significa que la respuesta es no , no puede acceder al objeto $event otra manera sino a través del parámetro de devolución de llamada.

Answer 4

No recomendaría hacer esto, pero puede anular la directiva ngClick para hacer lo que está buscando. Eso no está diciendo, deberías.

Con la implementación original en 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});
});
});
};
}

Podemos hacer esto para anularlo:

// 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;
});
});

Entonces pasarías en tus funciones así:

<div ng-click="func"></div>

Opuesto a:

<div ng-click="func()"></div>

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

Como dije, no recomendaría hacer esto, pero es una prueba de concepto que le muestra que sí. De hecho, puede sobrescribir / extender / aumentar el comportamiento angular incorporado para satisfacer sus necesidades. Sin tener que profundizar tanto en la implementación original.

Por favor, úselo con cuidado, si tuviera que decidir sobre ir por este camino (aunque es muy divertido).