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


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.