Comment ajouter de nombreuses fonctions en UN clic?


293

J'ai cherché comment exécuter cela, mais je ne trouve rien de similaire jusqu'à présent, :( Je pourrais imbriquer les deux fonctions oui, mais je me demande simplement si c'est possible? J'aimerais le faire littéralement:

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

Mon code JS en ce 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);
};

Je voudrais appeler deux fonctions en un seul clic, comment puis-je faire cela dans angularJS? Je pensais que ce serait simple comme en CSS lorsque vous ajoutez plusieurs classes ... mais ce n'est pas :(

Réponses:


652

Vous avez 2 options:

  1. Créez une troisième méthode qui encapsule les deux méthodes. L'avantage ici est que vous mettez moins de logique dans votre modèle.

  2. Sinon, si vous souhaitez ajouter 2 appels en ng-click, vous pouvez ajouter ';' après edit($index)comme ça

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

Voir ici: http://jsfiddle.net/laguiz/ehTy6/


1
J'ai utilisé la méthode deux (qui fait ce qui est nécessaire), mais pourquoi n'y a-t-il pas deux appels en un ng-click?
Dave Everitt

1
C'est pourquoi j'ai donné 2 options. Personnellement, je préfère envelopper les appels dans mon contrôleur, mais c'est à vous.
Maxence

4
Il n'y a pas de problème avec l'option 2 mais l'option 1 est plus propre car vous devez éviter d'ajouter du code et de la logique dans vos vues. C'est mieux si vous devez modifier quelque chose à l'avenir.
Dani Barca Casafont

5
Dans mon cas, l'option 2 signifie éviter d'ajouter une fonction commune à l'intérieur d'une directive, ce qui est probablement plus lent et certainement plus difficile à maintenir.
Alex

2
L'option 1 vous donne également une fonction supplémentaire inutile à tester
Parris Varney

18

Vous pouvez appeler plusieurs fonctions avec ';'

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

8

Beaucoup de gens utilisent l'option (cliquez) donc je vais partager cela aussi.

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

4
L'utilisation de (click) = "function (); function2 ()" fonctionne également. Je viens de découvrir cela et je voulais partager.
amlane86

J'ai trouvé cela utile lors de la liaison avec keyup.enter. La ;séparation n'a pas fonctionné car les méthodes ne s'exécutaient pas toujours dans l'ordre.
xandermonkey

2

Essaye ça:

  • Créer une collection de fonctions
  • Créez une fonction qui parcourt et exécute toutes les fonctions de la collection.
  • Ajoutez la fonction au html
array = [
    function() {},
    function() {},
    function() {}
]

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

ng - click = "loop()"

1

Suivez ce qui suit

ng-click="anyFunction()"

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

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

1
La syntaxe ici est incorrecte. Comme expliqué ci-dessus, le point-virgule est le délimiteur; pas une virgule ... Entre autres ...
Erik Grosskurth
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.