Як додати багато функцій за один ng-клік?


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-клац, ви можете додати ";" після edit($index)подібного

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

Дивіться тут: http://jsfiddle.net/laguiz/ehTy6/


1
Я використовував метод два (який робить те, що потрібно), але які причини не мають двох дзвінків в одному ng-click?
Дейв Еверітт

1
Ось чому я дав 2 варіанти. Особисто я вважаю за краще вказувати дзвінки в свій контролер, але це залежить від вас.
Максенція

4
Немає проблем з варіантом 2, але варіант 1 є більш чистим, оскільки вам слід уникати додавання коду та логіки у ваші погляди. Краще, якщо вам потрібно буде щось змінити в майбутньому.
Dani Barca Casafont

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.