8

親ディレクティブと子ディレクティブの間で分離されたスコープ (再利用可能なアイテムである可能性があります) と通信するための最良の一般的なアプローチは何かを理解しようとしています。

つまり、子ディレクティブが何らかの方法で親ディレクティブを更新する必要がある場合 (両方ともスコープが分離されている)、コールバック関数を渡す必要があります。

例えば：

.directive('filterReviewStepBox', function () {
    return {
        restrict: 'EA',
        scop: {
            //some data
        },
        template: '<div>text<reusable-dir></reusable-dir call-back="foo"></div>',
        link: function (scope, elem, attrs) {
            scope.foo = function () {
                console.log('bar');
            };
        }
    };
}).directive('reusableDir', function () {
    return {
        restrict: 'EA',
        scope: {
            callBack: '=callBack'
                //other data
        },
        template: '<div>text<button type="button" ng-click="bar"></button></div>',
        link: function (scope, elem, attrs) {
            scope.bar = function () {
                scope.callBack();
            }
        }
    };
});

または $emit() を使用する必要があります:

例えば：

  directive('filterReviewStepBox', function () {
        return {
            restrict: 'EA',
            scope: {
                // some data
            },
            template: '<div>text<reusable-dir></reusable-dir></div>',
            link: function (scope, elem, attrs) {
                scope.$on('foo', function () {
                    console.log('bar');
                });
            }
        };
    }).directive('reusableDir', function () {
        return {
            restrict: 'EA',
            scope: { //some data
            },
            template: '<div>text<button type="button" ng-click="bar"></button></div>',
            link: function (scope, elem, attrs) {
                scope.bar = function () {
                    scope.$emit('foo');
                };
            }
        };
    });

もっと大きなスケールでより理解しやすいのはemitだと思いますが、パフォーマンスとオーバーヘッドが心配ですが、まだ確信が持てません

オンラインで最善のアプローチを探してみましたが、それでも踏みにじられました

編集

のことを忘れていた

必要とする

オプション。しかし、これが最も正しい解決策であるかどうかはまだわかりません。これにより、子または孫を再利用することができず、ディレクティブが単一の目的のアイテムになるためです。

4

3 に答える 3

0

性能だけでなく、設計やメンテナンスの観点からもいくつかの要素を考慮する必要があると思います。

  1. コールバック メソッド: これはおそらく最も効率的なオプションです。子ディレクティブは、親ディレクティブの 1 つのメソッドを呼び出すだけで、オーバーヘッドはありません。ここで説明されているかなりの数のオプションがあります: https://stackoverflow.com/a/27997722/2889528

  2. エミット (またはさらにブロードキャスト) : このメソッドは、イベントをすべての $scope(s) 上 (エミット) または下 (ブロードキャスト) の階層にパブリッシュします。利用可能です。

  3. Injectable Common Service : このオプションは、$scope が利用できないメソッドを呼び出す場合に使用できます。ただし、サービスへの依存度が高くなります。これは、よりパブ サブ デザインです。

于 2016-04-16T04:58:17.133 に答える