AngularJsディレクティブの継承リンク関数

Question

現在、Angularのカスタムディレクティブを使用して、親divのサイズを監視してangle-nvd3グラフのサイズを変更しています。これは動作しますが、サイズ変更された1つのグラフでも、すべてのグラフを再描画する必要があります。

派生カスタムディレクティブの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> 

Answer 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> 

：

'分離'スコープオブジェクトハッシュは、ローカルSCのセットを定義しますopeのプロパティは、ディレクティブの要素の属性から派生したものです。これらのローカルプロパティは、テンプレートの値のエイリアシングに役立ちます。オブジェクトハッシュのキーは分離スコープのプロパティの名前にマップされます。値は、ディレクティブの要素の属性をマッチングを通じて、プロパティが親スコープにバインドする方法を定義します。

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

からAngularJS Comprehensive Directive API Reference -- Scope