Ich möchte eine geringfügige Änderung an einer Direktive eines Drittanbieters vornehmen (insbesondere Angular UI Bootstrap ). Ich möchte lediglich den Geltungsbereich der pane
Richtlinie erweitern:
angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
// various methods
}])
.directive('tabs', function() {
return {
// etc...
};
})
.directive('pane', ['$parse', function($parse) {
return {
require: '^tabs',
restrict: 'EA',
transclude: true,
scope:{
heading:'@',
disabled:'@' // <- ADDED SCOPE PROPERTY HERE
},
link: function(scope, element, attrs, tabsCtrl) {
// link function
},
templateUrl: 'template/tabs/pane.html',
replace: true
};
}]);
Aber ich möchte Angular-Bootstrap auch mit Bower auf dem neuesten Stand halten. Sobald ich renne bower update
, werde ich meine Änderungen überschreiben.
Wie kann ich diese Richtlinie getrennt von dieser Laubenkomponente erweitern?
$provide.decorator()
, siehe meine Antwort unten.Antworten:
Der wahrscheinlich einfachste Weg, dies zu lösen, besteht darin, in Ihrer App eine Direktive mit demselben Namen wie die Direktive eines Drittanbieters zu erstellen. Beide Anweisungen werden ausgeführt, und Sie können ihre Ausführungsreihenfolge mithilfe der
priority
Eigenschaft angeben (zuerst wird eine höhere Priorität ausgeführt).Die beiden Direktiven teilen sich den Geltungsbereich, und Sie können über die
link
Methode Ihrer Direktive auf den Geltungsbereich der Direktive eines Drittanbieters zugreifen und diesen ändern .Option 2: Sie können auch auf den Geltungsbereich einer Drittanbieter-Direktive zugreifen, indem Sie einfach Ihre eigene willkürlich benannte Direktive auf dasselbe Element setzen (vorausgesetzt, keine der Direktiven verwendet den isolierten Geltungsbereich). Alle nicht isolierten Bereichsanweisungen für ein Element teilen sich den Bereich.
Weiterführende Literatur: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives
Hinweis: Meine vorherige Antwort betraf das Ändern eines Drittanbieter-Dienstes, nicht einer Direktive.
quelle
$compile
doc hierTL; DR - gib mir die Demo!
Big Demo Button
Verwenden Sie
$provide
'sdecorator()
, um die Direktive des Dritten zu dekorieren.In unserem Fall können wir den Geltungsbereich der Richtlinie folgendermaßen erweitern:
Zuerst fordern wir an, die
pane
Direktive zu dekorieren, indem wir ihren Namen übergeben, derDirective
als erstes Argument verkettet ist , und rufen sie dann aus dem Rückrufparameter ab (einem Array von Direktiven, die diesem Namen entsprechen).Sobald wir es erhalten haben, können wir sein Bereichsobjekt erhalten und es nach Bedarf erweitern. Beachten Sie, dass dies alles im
config
Block erfolgen muss.Einige Notizen
Es wurde vorgeschlagen, einfach eine Direktive mit demselben Namen hinzuzufügen und dann ihre Prioritätsstufe festzulegen. Abgesehen davon, dass es unsemantisch ist (was nicht einmal ein Wort ist , weiß ich ...), wirft es Probleme auf, z. B. was ist, wenn sich die Prioritätsstufe der Richtlinie eines Drittanbieters ändert?
JeetendraChauhan hat behauptet (ich habe es jedoch nicht getestet), dass diese Lösung in Version 1.13 nicht funktioniert.
quelle
decorator()
ist defekt (aktualisiert auf docs.angularjs.org/api/auto/service/$provide#decorator )bindToController
wurde in v1.3 eingeführt. Beachten Sie jedoch, dass dies keine alternative Lösung ist, sondern nur für einen bestimmten Fall, in dem die ursprüngliche Richtlinie mit derbindToController
Eigenschaft eingerichtet wurde. Gute Idee, ich werde dies als AntwortObwohl dies nicht die direkte Antwort auf Ihre Frage ist, möchten Sie vielleicht wissen, dass die neueste Version (im Master) von http://angular-ui.github.io/bootstrap/ Unterstützung für das Deaktivieren von Registerkarten hinzugefügt hat. Diese Funktion wurde hinzugefügt über: https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2
quelle
Eine andere Lösung, bei der Sie eine neue Direktive erstellen, die sie erweitert, ohne die ursprüngliche Direktive zu ändern
Die Lösung ähnelt der Dekorationslösung:
Erstellen Sie eine neue Direktive und fügen Sie als Abhängigkeit die Direktive ein, die Sie erweitern möchten
Auf diese Weise können Sie die ursprüngliche Direktive und die erweiterte Version in derselben App verwenden
quelle
angular.merge
hätte verwendet werden sollen, ich werde das Beispiel aktualisierenHier ist eine andere Lösung für ein anderes Szenario zum Erweitern von Bindungen auf eine Direktive mit dem
bindToController
Eigenschaft.Hinweis: Dies ist keine Alternative zu anderen hier angebotenen Lösungen. Es wird nur ein bestimmter Fall gelöst (der in anderen Antworten nicht behandelt wird), mit dem die ursprüngliche Richtlinie erstellt wurde
bindToController
.quelle