2

1 つの属性パラメーター (コントローラーのイベント関数の名前) を取るディレクティブを作成する必要があるとします。ディレクティブは何らかの処理を行ってから、そのイベント ハンドラーで通知を発生させ、いくつかの処理パラメーターを渡します。

双方向バインディングなどの不必要なオーバーヘッドを回避するために、ディレクティブでそのような属性を設定するための推奨される方法は何ですか?

これまでのところ、以下の例に示すように、双方向バインディングを使用することによってのみこれを達成できました。

app.controller("testCtrl", function ($scope) {
    $scope.onClickEvent = function (ctrlDown) {
        alert(ctrlDown);
    }
});

app.directive("customInput", function () {
    return {
        restrict: "E",
        scope: {
            onClickNotify: "=onClick",
        },
        template: "<input type='text' ng-click='onClick()' />",
        replace: true,
        transclude: false,
        link: function (scope, element, attrs, controller) {
            scope.onClick = function () {
                if (typeof (scope.onClickNotify) == 'function') {
                    scope.onClickNotify(window.event.ctrlKey);
                }
            }
        }
    }
});

<custom-input on-click="onClickEvent" />

上記の例では、ディレクティブは "=" - 属性の双方向バインディングを使用しています。これは、私がそれを機能させることができた唯一の方法です。私が理解できないのは、なぜ「&」を使用できないのですか? AngularJS のドキュメントによると、次のように、名前付きのパラメーターを渡すことができるはずです。

scope.onClickNotify({ctrlDown: window.event.ctrlKey});

しかし、それはうまくいきません。そして、次のようにイベント名にパラメーターを指定しようとすると:

<custom-input on-click="onClickEvent(ctrlDown)" />

その後、まだ機能しません。代わりに、ディレクティブで渡す値は無視されます。

バックグラウンドで実際に何が起こっているのか混乱しています。「&」で期待どおりに機能しないのはなぜですか? このシナリオでは、単純な属性 (「@」を使用) としてではなくても、関数名を一方向に渡すだけなので、双方向バインディングはオーバーヘッドのように見えます。

ここで何か間違ったことをしている場合、正しい方法は何ですか?

4

1 に答える 1

6

を使用して動作させまし&た。あなたが正しいです。双方向バインディングの作成はオーバーヘッドです。

実際には、コントローラー メソッドを呼び出すときにオブジェクトを渡すことになっています。

app.directive("customInput", function ($timeout) {
    return {
        restrict: "E",
        scope: {
            onClickNotify: "&onClick",
        },
        template: "<input type='text' ng-click='onClick()' />",
        replace: true,
        transclude: false,          
        link: function (scope, element, attrs, controller) {
            scope.onClick = function () {
                if (typeof (scope.onClickNotify) == 'function') {
                    scope.onClickNotify({ctrlDown:"foo"});
                }
            }
        }
    }
});

HTML:

<custom-input on-click="onClickEvent(ctrlDown)" />
于 2013-09-17T08:40:37.643 に答える