0

現在、Angular でカスタム ディレクティブを使用して、親 div のサイズ変更を監視して angular-nvd3 チャートのサイズを変更しています。これは機能しますが、サイズが変更されている単一のグラフでも、すべてのグラフを再描画する必要があります。

派生したカスタム ディレクティブで updateHeight および updateWidth 関数をオーバーライドして、個々のチャートを更新することは可能ですか?個別のディレクティブを作成してコードを複製する必要はありません。

angular.module('app.graphs').directive('flexibleDiv', function () {
    return {
        scope: {
            opts: '=' 
        },
        link: function (scope, element, attr) {

            // Watching height of parent div
            scope.$watch(function () {
                return element.parent(0).height();
            }, updateHeight);

            // Watching width of parent div
            scope.$watch(function () {
                return element.parent(0).width();
            }, updateWidth);

            function updateHeight() {
                scope.$parent.scatter_api.refresh();
                scope.$parent.focus_api.refresh();
                scope.$parent.scatter_twoaxis_api.refresh();
            }

            function updateWidth() {
                scope.$parent.scatter_api.refresh();
                scope.$parent.focus_api.refresh();
                scope.$parent.scatter_twoaxis_api.refresh();
            }
        }
    }

 <div class="widget-body no-padding" flexible-div>
        <nvd3-scatter-chart data="scatter_data" api="scatter_api"></nvd3-scatter-chart>
         </div>
  </div>
4

1 に答える 1

1

ディレクティブは式バインディングを使用して、イベントで呼び出す親式を定義できます。

angular.module('app.graphs').directive('flexibleDiv', function () {
    return {
        scope: {
            opts: '=',
            onUpdateSize: '&' 
        },
        link: function (scope, element, attr) {

            // Watching height of parent div
            scope.$watch(function () {
                return element.parent(0).height();
            }, updateSize);

            // Watching width of parent div
            scope.$watch(function () {
                return element.parent(0).width();
            }, updateSize);

            function updateSize() {
                scope.onUpdateSize();
            }

        }
    }

HTML

<div flexible-div on-update-size="scatter_api.refresh()">
    <nvd3-scatter-chart data="scatter_data" api="scatter_api">
    </nvd3-scatter-chart>
</div>

ドキュメントから：

「isolate」スコープ オブジェクト ハッシュは、ディレクティブの要素の属性から派生した一連のローカル スコープ プロパティを定義します。これらのローカル プロパティは、テンプレートの値のエイリアスに役立ちます。オブジェクト ハッシュのキーは、isolate スコープのプロパティの名前にマップされます。値は、ディレクティブの要素の一致する属性を介して、プロパティが親スコープにバインドされる方法を定義します。

  • &または&attr- 親スコープのコンテキストで式を実行する方法を提供します。属性名が指定されていない場合、属性名はローカル名と同じであると見なされます。

-- AngularJS の包括的なディレクティブ API リファレンス -- スコープ

于 2016-08-15T18:45:16.340 に答える