Jak dodać wiele funkcji za jednym kliknięciem?


293

Szukałem, jak to wykonać, ale jak dotąd nie mogę znaleźć niczego powiązanego :( Mogłem zagnieździć obie funkcje tak, ale zastanawiam się, czy jest to możliwe? Chciałbym to zrobić dosłownie:

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

Mój kod JS w tej chwili:

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

Chciałbym wywołać dwie funkcje za pomocą jednego kliknięcia, jak mogę to zrobić w angularJS? Myślałem, że będzie to proste jak w CSS, kiedy dodasz wiele klas ... ale to nie jest :(

Odpowiedzi:


652

Masz 2 opcje:

  1. Utwórz trzecią metodę, która obejmie obie metody. Zaletą jest to, że w logice umieszczasz mniej logiki.

  2. W przeciwnym razie, jeśli chcesz dodać 2 połączenia jednym kliknięciem, możesz dodać ';' po edit($index)tym

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

Zobacz tutaj: http://jsfiddle.net/laguiz/ehTy6/


1
Użyłem metody drugiej (która robi to, co jest potrzebne), ale jakie są powody, dla których nie ma dwóch wywołań w jednym ng-click?
Dave Everitt

1
Dlatego dałem 2 opcje. Osobiście wolę zawijać połączenia w moim kontrolerze, ale to zależy od ciebie.
Maxence

4
Nie ma problemu z opcją 2, ale opcja 1 jest czystsza, ponieważ należy unikać dodawania kodu i logiki w swoich widokach. Lepiej, jeśli będziesz musiał coś zmodyfikować w przyszłości.
Dani Barca Casafont

5
W moim przypadku opcja 2 oznacza unikanie dodawania wspólnej funkcji do dyrektywy, która prawdopodobnie jest wolniejsza i zdecydowanie trudniejsza w utrzymaniu.
Alex

2
Opcja 1 daje również jeszcze jedną niepotrzebną funkcję do przetestowania
Parris Varney

18

Możesz wywołać wiele funkcji za pomocą ';'

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

8

Wiele osób korzysta z opcji (kliknij), więc ja też to udostępnię.

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

4
Użycie (kliknięcie) = "funkcja (); funkcja2 ()" również działa. Właśnie to odkryłem i chciałem się podzielić.
amlane86

Uznałem, że jest to przydatne podczas wiązania z keyup.enter. ;Separacja nie działa ponieważ metody nie zawsze wykonywany w porządku.
xandermonkey

2

Spróbuj tego:

  • Zrób kolekcję funkcji
  • Utwórz funkcję, która zapętla i wykonuje wszystkie funkcje w kolekcji.
  • Dodaj funkcję do html
array = [
    function() {},
    function() {},
    function() {}
]

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

ng - click = "loop()"

1

Postępuj zgodnie z poniższymi instrukcjami

ng-click="anyFunction()"

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

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

1
Składnia tutaj jest niepoprawna. Jak wyjaśniono powyżej, średnikiem jest separator; nie przecinek ... Między innymi ...
Erik Grosskurth
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.