$event automatisch mit ng-click übergeben?

Lesezeit: 5 Minuten

Benutzer-Avatar
Elise

Ich weiß, dass ich Zugriff auf das Klickereignis von erhalten kann ng-click wenn ich in die passiere $event Objekt so:

<button ng-click="myFunction($event)">Give me the $event</button>

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

Es ist ein bisschen nervig, passieren zu müssen $event ausdrücklich jedes Mal. Kann man einstellen ng-click um es irgendwie standardmäßig an die Funktion zu übergeben?

  • Ich weiß, dass dieser Code nur zur Demonstration dient, aber undefined sollte sein "undefined"andernfalls wird der Ausdruck immer als falsch ausgewertet typeof gibt eine Zeichenfolge zurück.

    – Fabrício Matté

    13. Januar 2014 um 21:17 Uhr


  • Ich frage mich, warum Sie brauchen $event ohnehin.

    – ein besserer oliver

    13. Januar 2014 um 21:28 Uhr

  • Das @zeroflagL Event-Objekt wird normalerweise verwendet, um das Bubbling/Propagation zu stoppen.

    – Stewie

    13. Januar 2014 um 21:36 Uhr

  • @Stewie myFunction ist Teil eines Controllers. Ein Controller sollte sich nicht um die Benutzeroberfläche kümmern. Außerdem hat eine einfache Schaltfläche keine Standardaktion. Und eckig verhindert sowieso viele Standardaktionen. Sie haben natürlich Recht, aber es ist schwer, sich einen guten Anwendungsfall vorzustellen.

    – ein besserer oliver

    13. Januar 2014 um 21:46 Uhr

  • @zeroflagL Ich habe eine Direktive contextMenu die mehrere Funktionen für den Bereich bereitstellt (Öffnen, Schließen, Umschalten), die mit dem Namen eines bestimmten aufgerufen werden contextMenuz.B ng-click="account_menu.toggle()". Das Menü selbst befindet sich in einem anderen Element, z <div context-menu="account_menu"></div>". Um das Menü richtig auf der Seite direkt unter dem auslösenden Element zu positionieren, das aufgerufen hat toggle()auf die ich zugreifen möchte ng-click‘s $event.target Element, damit ich seine Koordinaten bekommen kann. Lassen Sie mich wissen, ob es einen einfacheren Weg gibt 🙂

    – Elise

    13. Januar 2014 um 22:01 Uhr


Werfen Sie einen Blick auf die ng-click Richtlinie Quelle:

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

Es zeigt wie zum event Objekt wird weitergegeben zum ng-click Ausdruck, verwenden $event als Name des Parameters. Dies wird vom $parse-Dienst erledigt, der die Parameter nicht zulässt bluten hinein der Zielbereich, das heißt Die Antwort ist neinkönnen Sie nicht darauf zugreifen $event Objekt auf andere Weise als über den Callback-Parameter.

Benutzer-Avatar
Jeff Tian

Füge hinzu ein $event zum ng-clickzum Beispiel:

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

Dann ist die jQuery.Event wurde an den Callback übergeben:

Geben Sie hier die Bildbeschreibung ein

  • … außer dass dies genau das ist, was das OP NICHT zu tun versucht, es sei denn, ich bin verrückt. Der ganze Sinn dieses Beitrags besteht darin, auf das $event zuzugreifen, ohne es explizit zu übergeben … was genau das zu sein scheint, was Sie hier tun.

    – Dudewad

    1. Juli 2015 um 18:32 Uhr

  • Ich (andererseits) kann damit leben

    – svarog

    2. Juli 2015 um 11:56 Uhr


  • Hier gelandet nach einer Google-Suche, wie man $event übergibt. Ähnlich wie andere Upvoter, habe die ursprüngliche Frage nicht gelesen 😐

    – RasikaSam

    2. Februar 2016 um 23:42 Uhr

Wie andere sagten, können Sie nicht genau das tun, wonach Sie fragen. Alle Werkzeuge, die dem eckigen Framework zur Verfügung stehen, stehen Ihnen jedoch auch tatsächlich zur Verfügung! Das bedeutet, dass Sie tatsächlich Ihre eigenen Elemente schreiben und diese Funktion selbst bereitstellen können. Ich habe eines davon als Beispiel aufgeschrieben, das Sie im folgenden Plunkr sehen können (http://plnkr.co/edit/Qrz9zFjc7Ud6KQoNMEI1).

Die wichtigsten Teile davon sind, dass ich ein “anklickbares” Element definiere (tun Sie dies nicht, wenn Sie ältere IE-Unterstützung benötigen). Im Code sieht das so aus:

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

Dann habe ich eine Anweisung definiert, um dieses anklickbare Element zu nehmen und es in das umzuwandeln, was ich will (etwas, das automatisch mein Klickereignis einrichtet):

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

Endlich habe ich in meinem Controller das Click-Event bereit:

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

Nun, es ist erwähnenswert, dass dies den Namen der Methode fest codiert, die das Click-Ereignis verarbeitet. Wenn Sie dies eliminieren möchten, sollten Sie in der Lage sein, die Direktive mit dem Namen Ihres Click-Handlers und “tada” zu versehen – Sie haben ein Element (oder Attribut), das Sie verwenden können und nie wieder “$event” einfügen müssen.

Ich hoffe, das hilft!

  • Sie müssen dieses handleClick-Ereignis zu etwas machen, das übergeben werden kann, Mann 🙂

    – vbullinger

    19. Mai 2017 um 17:28 Uhr

Ich würde dies nicht empfehlen, aber Sie können das überschreiben ngClick Anweisung zu tun, wonach Sie suchen. Das heißt nicht, Sie sollten.

Unter Berücksichtigung der ursprünglichen Implementierung:

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

Wir können dies tun, um es zu überschreiben:

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

Dann würden Sie Ihre Funktionen wie folgt übergeben:

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

im Gegensatz zu:

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

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

Wie gesagt, ich würde nicht empfehlen, dies zu tun, aber es ist ein Proof of Concept, der Ihnen zeigt, dass Sie das eingebaute Winkelverhalten tatsächlich überschreiben / erweitern / erweitern können, um es Ihren Anforderungen anzupassen. Ohne allzu tief in die ursprüngliche Implementierung eintauchen zu müssen.

Bitte verwenden Sie es mit Vorsicht, wenn Sie sich entscheiden sollten, diesen Weg einzuschlagen (es macht aber viel Spaß).

1082330cookie-check$event automatisch mit ng-click übergeben?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy