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 :(

YoniGeek
la source

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/

Maxence
la source
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()"
amit
la source
8

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

<button (click)="function1()" (click)="function2()">Button</button>
Nebojsa Sapic
la source
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()"
tzvis
la source
1

Suivez ce qui suit

ng-click="anyFunction()"

anyFunction() {
   // call another function here
   anotherFunction();
}
Bhaskararao Gummidi
la source
-15
ng-click "$watch(edit($index), open())"
Austin
la source
1
La syntaxe ici est incorrecte. Comme expliqué ci-dessus, le point-virgule est le délimiteur; pas une virgule ... Entre autres ...
Erik Grosskurth