Как добавить много функций в один нг-клик?


293

Я ищу, как выполнить это, но пока не могу найти ничего связанного :( Я мог бы вложить обе функции, да, но мне просто интересно, возможно ли это? Я хотел бы сделать это буквально:

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

Мой код JS на данный момент:

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

Я хотел бы вызвать две функции одним щелчком мыши, как я могу сделать это в angularJS? Я думал, что будет просто, как в CSS, когда вы добавляете несколько классов ... но это не так :(

Ответы:


652

У вас есть 2 варианта:

  1. Создайте третий метод, который обернет оба метода. Преимущество здесь в том, что вы вкладываете меньше логики в свой шаблон.

  2. В противном случае, если вы хотите добавить 2 вызова в ng-click, вы можете добавить ';' после edit($index)этого

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

Смотрите здесь: http://jsfiddle.net/laguiz/ehTy6/


1
Я использовал метод два (который делает то , что нужно), но какие причины есть не иметь два вызова в один ng-click?
Дэйв Эверитт,

1
Вот почему я дал 2 варианта. Лично я предпочитаю упаковывать вызовы в моем контроллере, но это зависит от вас.
Maxence

4
С вариантом 2 проблем нет, но вариант 1 более чистый, поскольку вам следует избегать добавления кода и логики в свои представления. Лучше, если вам нужно что-то изменить в будущем.
Дани Барса Казафонт

5
В моем случае вариант 2 означает избегать добавления общей функции в директиву, которая, вероятно, медленнее и определенно сложнее поддерживать.
Алекс

2
Вариант 1 также дает вам еще одну ненужную функцию для тестирования
Parris Varney

18

Вы можете вызывать несколько функций с помощью ';'

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

8

Многие люди используют (клик), поэтому я тоже поделюсь этим.

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

4
Использование (click) = "function (); function2 ()" также работает. Я только что узнал об этом и хотел поделиться.
amlane86

Я нашел это полезным при привязке к keyup.enter. ;Разделение не работает , потому что методы не всегда выполняются в порядке.
xandermonkey

2

Попробуй это:

  • Сделайте коллекцию функций
  • Создайте функцию, которая перебирает и выполняет все функции в коллекции.
  • Добавьте функцию в HTML
array = [
    function() {},
    function() {},
    function() {}
]

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

ng - click = "loop()"


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

1
Синтаксис здесь неверный. Как объяснено выше, точка с запятой является разделителем; не запятая ... Помимо всего прочего ...
Эрик
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.