Come aggiungere molte funzioni in ONE ng-click?


293

Sto cercando come eseguire questo, ma non riesco a trovare nulla di correlato finora, :( Potrei nidificare entrambe le funzioni sì, ma mi chiedo solo se questo è possibile? Mi piacerebbe farlo letteralmente:

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

Il mio codice JS al momento:

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

Vorrei chiamare due funzioni con un solo clic, come posso farlo in angularJS? Ho pensato che sarebbe stato semplice come nei CSS quando aggiungi più classi ... ma non lo è :(

Risposte:


652

Hai 2 opzioni:

  1. Crea un terzo metodo che avvolga entrambi i metodi. Il vantaggio qui è che metti meno logica nel tuo modello.

  2. Altrimenti, se si desidera aggiungere 2 chiamate in ng-clic, è possibile aggiungere ';' dopo edit($index)così

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

Vedi qui: http://jsfiddle.net/laguiz/ehTy6/


1
Ho usato il metodo due (che fa ciò che è necessario), ma quali sono i motivi per non avere due chiamate in una ng-click?
Dave Everitt,

1
Ecco perché ho dato 2 opzioni. Personalmente preferisco avvolgere le chiamate nel mio controller, ma dipende da te.
Maxence,

4
Non c'è nessun problema con l'opzione 2 ma l'opzione 1 è più pulita poiché dovresti evitare di aggiungere codice e logica nelle tue viste. È meglio se devi modificare qualcosa in futuro.
Dani Barca Casafont,

5
Nel mio caso, l'opzione 2 significa evitare di aggiungere una funzione comune all'interno di una direttiva, che probabilmente è più lenta e sicuramente più difficile da mantenere.
Alex,

2
L'opzione 1 offre anche un'altra funzione non necessaria da testare
Parris Varney, l'

18

Puoi chiamare più funzioni con ';'

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

8

Molte persone usano l'opzione (clic) quindi condividerò anche questo.

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

4
L'uso di (click) = "function (); function2 ()" funziona pure. L'ho appena scoperto e volevo condividere.
amlane86,

Ho trovato questo utile quando mi associo a keyup.enter. La ;separazione non ha funzionato perché i metodi non venivano sempre eseguiti in ordine.
xandermonkey

2

Prova questo:

  • Crea una raccolta di funzioni
  • Crea una funzione che attraversi ed esegua tutte le funzioni nella raccolta.
  • Aggiungi la funzione all'html
array = [
    function() {},
    function() {},
    function() {}
]

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

ng - click = "loop()"

1

Segui il seguito

ng-click="anyFunction()"

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

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

1
La sintassi qui non è corretta. Come spiegato sopra, il punto e virgola è il delimitatore; non una virgola ... Tra le altre cose ...
Erik Grosskurth,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.