¿Cómo agregar muchas funciones en ONE ng-click?

293

He estado buscando cómo ejecutar esto, pero no puedo encontrar nada relacionado hasta ahora :( Podría anidar ambas funciones sí, pero me pregunto si esto es posible. Me gustaría hacer esto literalmente:

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

Mi código JS en este 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);
};

Me gustaría llamar a dos funciones con solo un clic, ¿cómo puedo hacer esto en angularJS? Pensé que sería sencillo como en CSS cuando agrega varias clases ... pero no es :(

YoniGeek
fuente

Respuestas:

652

Tienes 2 opciones :

  1. Cree un tercer método que envuelva ambos métodos. La ventaja aquí es que pones menos lógica en tu plantilla.

  2. De lo contrario, si desea agregar 2 llamadas en ng-click, puede agregar ';' despues edit($index)asi

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

Ver aquí: http://jsfiddle.net/laguiz/ehTy6/

Maxence
fuente
1
He usado el método dos (que hace lo que se necesita), pero ¿qué razones hay para no tener dos llamadas en una ng-click?
Dave Everitt
1
Es por eso que le di 2 opciones. Personalmente, prefiero ajustar las llamadas en mi controlador, pero depende de usted.
Maxence
44
No hay problema con la opción 2, pero la opción 1 es más limpia, ya que debe evitar agregar código y lógica en sus vistas. Es mejor si necesita modificar algo en el futuro.
Dani Barca Casafont
55
En mi propio caso, la Opción 2 significa evitar agregar una función común dentro de una directiva, que probablemente sea más lenta y definitivamente más difícil de mantener.
Alex
2
La opción 1 también le brinda una función innecesaria más para tener que probar
Parris Varney el
18

Puede llamar a múltiples funciones con ';'

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

Mucha gente usa la opción (clic), así que también compartiré esto.

<button (click)="function1()" (click)="function2()">Button</button>
Nebojsa Sapic
fuente
44
El uso de (click) = "function (); function2 ()" también funciona. Me acabo de enterar y quería compartir.
amlane86
Encontré esto útil cuando se vincula a keyup.enter. La ;separación no funcionó porque los métodos no siempre se ejecutaban en orden.
xandermonkey
2

Prueba esto:

  • Haz una colección de funciones
  • Crea una función que recorra y ejecute todas las funciones de la colección.
  • Agregue la función al html
array = [
    function() {},
    function() {},
    function() {}
]

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

ng - click = "loop()"
tzvis
fuente
1

Sigue lo siguiente

ng-click="anyFunction()"

anyFunction() {
   // call another function here
   anotherFunction();
}
Bhaskararao Gummidi
fuente
-15
ng-click "$watch(edit($index), open())"
Austin
fuente
1
La sintaxis aquí es incorrecta. Como se explicó anteriormente, el punto y coma es el delimitador; no una coma ... Entre otras cosas ...
Erik Grosskurth