ワンクリックで多くの機能を追加するには?


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

1回のクリックで2つの関数を呼び出したいのですが、angularJSでこれをどのように実行できますか?CSSのように複数のクラスを追加するのは簡単だと思いましたが、それは:(

回答:


652

2つのオプションがあります。

  1. 両方のメソッドをラップする3番目のメソッドを作成します。ここでの利点は、テンプレートに含めるロジックが少なくなることです。

  2. それ以外の場合、ng-clickで2つの呼び出しを追加する場合は、「;」を追加できます。edit($index)このようにした後

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

ここを参照してください:http : //jsfiddle.net/laguiz/ehTy6/


1
私は方法2(必要なことを行う)を使用しましたが、2つの呼び出しを1つにしない理由は何ng-clickですか?
Dave Everitt 2013年

1
そのため、2つのオプションを指定しました。個人的には、コントローラーで呼び出しをラップすることを好みますが、それはあなた次第です。
Maxence 2013年

4
オプション2には問題はありませんが、ビューにコードとロジックを追加しないようにする必要があるため、オプション1はよりクリーンです。将来何かを変更する必要がある場合は、より良い方法です。
Dani Barca Casafont 2014年

5
私自身の場合、オプション2はディレクティブ内に共通の関数を追加することを回避することを意味します。これはおそらく遅く、確実に維持することが困難です。
Alex

2
オプション1は、テストに持っているあなたに1つ以上の不要な機能を提供します
パリスバーニー

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()"


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.