Wie füge ich mit EINEM Klick viele Funktionen hinzu?


293

Ich habe nach einer Möglichkeit gesucht, dies auszuführen, kann aber bisher nichts Ähnliches finden :( Ich könnte beide Funktionen verschachteln, aber ich frage mich nur, ob dies möglich ist. Ich möchte dies wörtlich tun:

<td><button class="btn" ng-click="edit($index) open()">Open me!</button></td>

Mein JS-Code im Moment:

$scope.open = function () {
  $scope.shouldBeOpen = true;
};      

$scope.edit = function(index){

  var content_1, content_2;
      content_1 = $scope.people[index].name;
      content_2 = $scope.people[index].age;

  console.log(content_1);
};

Ich möchte zwei Funktionen mit nur einem Klick aufrufen. Wie kann ich das in angleJS tun? Ich dachte, es wäre einfach wie in CSS, wenn Sie mehrere Klassen hinzufügen ... aber es ist nicht :(

Antworten:


652

Sie haben 2 Möglichkeiten:

  1. Erstellen Sie eine dritte Methode, die beide Methoden umschließt. Vorteil hierbei ist, dass Sie weniger Logik in Ihre Vorlage einfügen.

  2. Andernfalls können Sie ';' hinzufügen, wenn Sie 2 Anrufe in ng-click hinzufügen möchten. nach edit($index)so

    ng-click="edit($index); open()"

Siehe hier: http://jsfiddle.net/laguiz/ehTy6/


1
Ich habe Methode zwei verwendet (was tut, was benötigt wird), aber welche Gründe gibt es, nicht zwei Aufrufe in einem zu haben ng-click?
Dave Everitt

1
Deshalb habe ich 2 Optionen gegeben. Persönlich ziehe ich es vor, Anrufe in meinen Controller zu packen, aber es liegt an Ihnen.
Maxence

4
Es gibt kein Problem mit Option 2, aber Option 1 ist sauberer, da Sie vermeiden sollten, Code und Logik in Ihre Ansichten einzufügen. Es ist besser, wenn Sie in Zukunft etwas ändern müssen.
Dani Barca Casafont

5
In meinem Fall bedeutet Option 2, das Hinzufügen einer gemeinsamen Funktion innerhalb einer Direktive zu vermeiden, die wahrscheinlich langsamer und definitiv schwieriger zu warten ist.
Alex

2
Option 1 gibt Ihnen noch eine unnötige Funktion zu testen
Parris Varney

18

Sie können mehrere Funktionen mit ';' aufrufen.

ng-click="edit($index); open()"

8

Viele Leute benutzen die (Klick-) Option, also werde ich dies auch teilen.

<button (click)="function1()" (click)="function2()">Button</button>

4
Die Verwendung von (click) = "function (); function2 ()" funktioniert ebenfalls. Ich habe das gerade herausgefunden und wollte es teilen.
amlane86

Ich fand das nützlich beim Binden an keyup.enter. Die ;Trennung hat nicht funktioniert, da die Methoden nicht immer in der richtigen Reihenfolge ausgeführt wurden.
Xandermonkey

2

Versuche dies:

  • Erstellen Sie eine Sammlung von Funktionen
  • Erstellen Sie eine Funktion, die alle Funktionen in der Auflistung durchläuft und ausführt.
  • Fügen Sie die Funktion dem HTML hinzu
array = [
    function() {},
    function() {},
    function() {}
]

function loop() {
    array.forEach(item) {
        item()
    }
}

ng - click = "loop()"

1

Folgen Sie den Anweisungen unten

ng-click="anyFunction()"

anyFunction() {
   // call another function here
   anotherFunction();
}

-15
ng-click "$watch(edit($index), open())"

1
Die Syntax hier ist falsch. Wie oben erläutert, ist das Semikolon das Trennzeichen. kein Komma ... Unter anderem ...
Erik Grosskurth
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.