한 번의 클릭으로 많은 기능을 추가하는 방법은 무엇입니까?


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

두 가지 옵션이 있습니다.

  1. 두 방법을 모두 감싸는 세 번째 방법을 만듭니다. 여기서 장점은 템플릿에 로직을 적게 넣는다는 것입니다.

  2. 그렇지 않으면 ng-click에 2 개의 통화를 추가하려면 ';' 이후 edit($index)이 같은

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

여기를 참조하십시오 : http://jsfiddle.net/laguiz/ehTy6/


1
방법 2를 사용했지만 (필요한 작업을 수행함) 어떤 이유로 두 번의 호출 이 없는 이유는 무엇 ng-click입니까?
Dave Everitt

1
그래서 두 가지 옵션을 제공했습니다. 개인적으로 나는 내 컨트롤러에서 통화를 포장하는 것을 선호하지만 그것은 당신에게 달려 있습니다.
Maxence

4
옵션 2에는 문제가 없지만 뷰에 코드와 논리를 추가하지 않아야하므로 옵션 1이 더 깨끗합니다. 나중에 무언가를 수정해야하는 것이 좋습니다.
Dani Barca Casafont

5
필자의 경우 옵션 2는 지시문 내에 공통 함수를 추가하지 않는 것을 의미하며, 유지 관리가 느리고 확실히 어려울 수 있습니다.
Alex

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
구문이 잘못되었습니다. 위에서 설명한 것처럼 세미콜론은 구분 기호입니다. 쉼표가 아닙니다 ... 무엇보다도 ...
Erik Grosskurth
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.