Vererbung in AngularJs-Richtlinien Link-Funktion

Question

Ich verwende derzeit eine benutzerdefinierte Direktive in Angular, um meine angular-nvd3-Diagramme zu skalieren, indem ich nach einer Größenanpassung für das Eltern-div suche. Das funktioniert, aber ich muss jedes Diagramm neu zeichnen, auch wenn nur ein Diagramm skaliert wird.

Ist es möglich, die Funktion updateHeight und updateWidth in der abgeleiteten benutzerdefinierten Anweisung zu überschreiben, um jedes einzelne Diagramm zu aktualisieren, damit ich Code nicht durch Erstellen separater Anweisungen duplizieren muss.

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

Die Richtlinie kann einen Ausdruck Bindung verwenden, um die Mutter Ausdruck auf ein Ereignis aufrufen zu definieren:

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> 

Aus den Text & Tabellen:

Der Scope-Objekt-Hash 'Isolieren' definiert eine Menge von lokalem sc ope-Eigenschaften, die von Attributen des Elements der Anweisung abgeleitet werden. Diese lokalen Eigenschaften sind nützlich für das Aliasing von Werten für Vorlagen. Die Schlüssel im Objekt-Hash-Mapping entsprechen dem Namen der Eigenschaft im Isolationsbereich; die Werte definieren, wie die Eigenschaft auf den übergeordneten Bereich gebunden ist, über Attribute an der Richtlinie der Elementanpassung:

• & oder &attr - bietet eine Möglichkeit, einen Ausdruck im Zusammenhang mit dem übergeordneten Bereich auszuführen. Wenn kein Attributname angegeben wird, wird angenommen, dass der Attributname mit dem lokalen Namen identisch ist.

- AngularJS Comprehensive Directive API Reference -- Scope