Como adicionar muitas funções em UM ng-clique?


293

Eu estou procurando como executar isso, mas não consigo encontrar nada relacionado até agora, :( Eu poderia aninhar as duas funções sim, mas estou apenas imaginando se isso é possível? Gostaria de fazer isso literalmente:

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

Meu código JS no 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);
};

Gostaria de chamar duas funções com apenas um clique, como posso fazer isso no angularJS? Eu pensei que seria simples como no CSS quando você adiciona várias classes ... mas não é :(

Respostas:


652

Você tem 2 opções:

  1. Crie um terceiro método que envolva os dois métodos. A vantagem aqui é que você coloca menos lógica no seu modelo.

  2. Caso contrário, se você quiser adicionar 2 chamadas em ng-click, poderá adicionar ';' depois edit($index)assim

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

Veja aqui: http://jsfiddle.net/laguiz/ehTy6/


1
Eu usei o método dois (que faz o que é necessário), mas que razões existem para não haver duas chamadas em uma ng-click?
23813 Dave Everitt

1
Por isso dei duas opções. Pessoalmente, prefiro agrupar chamadas no meu controlador, mas depende de você.
Maxence

4
Não há problema com a opção 2, mas a opção 1 é mais limpa, pois você deve evitar adicionar código e lógica às suas visualizações. É melhor se você precisar modificar algo no futuro.
9119 Daniela Barca Casafont

5
No meu caso, a opção 2 significa evitar adicionar uma função comum dentro de uma diretiva, que provavelmente é mais lenta e definitivamente mais difícil de manter.
28415 Alex

2
Opção 1 dá-lhe também uma função mais desnecessário ter para teste
Parris Varney

18

Você pode chamar várias funções com ';'

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

8

Muitas pessoas usam a opção (clique), então vou compartilhar isso também.

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

4
Using (click) = "function (); function2 ()" também funciona. Acabei de descobrir isso e queria compartilhar.
amlane86

Achei isso útil ao vincular a keyup.enter. A ;separação não funcionou porque os métodos nem sempre estavam sendo executados em ordem.
precisa saber é o seguinte

2

Tente o seguinte:

  • Faça uma coleção de funções
  • Crie uma função que faça um loop e execute todas as funções na coleção.
  • Adicione a função ao html
array = [
    function() {},
    function() {},
    function() {}
]

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

ng - click = "loop()"

1

Siga o abaixo

ng-click="anyFunction()"

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

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

1
A sintaxe aqui está incorreta. Como explicado acima, o ponto e vírgula é o delimitador; não uma vírgula ... Entre outras coisas ...
Erik Grosskurth
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.