☰

複数の引数を持つ関数をバインドするAngularJSディレクティブ 質問する

tag-icon • tag-icon angularjs angularjs-directive
複数の引数を持つ関数をバインドするAngularJSディレクティブ 質問する

コントローラーで定義された関数をディレクティブ内のコールバック関数にバインドする際に問題が発生しています。コードは次のようになります。

私のコントローラーでは:

$scope.handleDrop = function ( elementId, file ) {
    console.log( 'handleDrop called' );
}

そこで私の指示は:

.directive( 'myDirective', function () {
    return {
      scope: {
        onDrop: '&'
      },
      link: function(scope, elem, attrs) {
        var myFile, elemId = [...]

        scope.onDrop(elemId, myFile);
      }
    } );

そして私の HTML ページでは:

<my-directive on-drop="handleDrop"></my-directive>

上記のコードではうまくいきませんでした。さまざまなチュートリアルを読んだところ、HTML ページで引数を指定する必要があると理解しています。

ベストアンサー1

縮小化を生き残る代替方法

HTML はそのままにしておきます:

<my-directive on-drop="handleDrop"></my-directive>

呼び出しを次のように変更します。

scope.onDrop()('123','125')

に与えられた追加の開き括弧と閉じ括弧に注意してくださいonDrop。これにより、関数のコードを挿入するのではなく、関数がインスタンス化されます。

なぜそれが良いのか

  1. 定義内のパラメータ名を変更してもhandleDrop()（または、正しく処理すればさらに追加しても）、HTML 内の各ディレクティブ挿入は変更されません。より DRY になります。

  2. @TrueWill が示唆したように、他のソリューションは縮小化に耐えられないことはほぼ確実ですが、この方法ではコードは最大限の柔軟性を維持し、名前に依存しません。

もう 1 つの個人的な理由は、オブジェクト構文です。これにより、より多くのコードを記述することになります。

functionName({xName: x, yName: y}) // (and adding the function signature in every directive call)

とは対照的に

functionName()(x,y) // (zero maintenance to your html)

素晴らしい解決策を見つけましたここ。

おすすめ記事