Chciałbym wprowadzić niewielką modyfikację w dyrektywie innej firmy (szczególnie w Angular UI Bootstrap ). Chcę po prostu dodać do zakresu pane
dyrektywy:
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
};
}]);
Ale chcę też, aby Angular-Bootstrap był na bieżąco z Bower. Jak tylko uruchomię bower update
, nadpiszę swoje zmiany.
Jak więc mam rozszerzyć tę dyrektywę niezależnie od tego komponentu altanki?
$provide.decorator()
, zobacz moją odpowiedź poniżej.Odpowiedzi:
Prawdopodobnie najprostszym sposobem rozwiązania tego problemu jest utworzenie dyrektywy w aplikacji o tej samej nazwie, co dyrektywa strony trzeciej. Obie dyrektywy będą działać, a kolejność ich uruchamiania można określić za pomocą
priority
właściwości (najpierw uruchamiane są o wyższym priorytecie).Dwie dyrektywy będą miały wspólny zakres, a możesz uzyskać dostęp i zmodyfikować zakres dyrektywy strony trzeciej za pomocą
link
metody swojej dyrektywy .Opcja 2: Możesz również uzyskać dostęp do zakresu dyrektywy strony trzeciej, po prostu umieszczając własną dowolnie nazwaną dyrektywę na tym samym elemencie co ona (zakładając, że żadna z dyrektyw nie używa zakresu izolowanego). Wszystkie dyrektywy zakresu nieizolowanego w elemencie będą miały wspólny zakres.
Dalsza lektura: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives
Uwaga: moja poprzednia odpowiedź dotyczyła modyfikacji usługi innej firmy, a nie dyrektywy.
źródło
$compile
dokumentu tutajTL; DR - daj mi demo!
Big Demo Button
Stosowanie
$provide
„sdecorator()
do, dobrze, ozdobić Dyrektywy osoby trzeciej.W naszym przypadku możemy rozszerzyć zakres dyrektywy w następujący sposób:
Najpierw prosimy o udekorowanie
pane
dyrektywy, przekazując jej nazwę połączoną zDirective
pierwszym argumentem, a następnie pobieramy ją z parametru wywołania zwrotnego (który jest tablicą dyrektyw pasujących do tej nazwy).Gdy już go otrzymamy, możemy uzyskać jego obiekt zakresu i rozszerzyć go w razie potrzeby. Zauważ, że wszystko to musi być zrobione w
config
bloku.Kilka uwag
Sugerowano po prostu dodanie dyrektywy o tej samej nazwie, a następnie ustawienie jej priorytetu. Oprócz tego, że jest niesemantyczny (co nie jest ani słowem , wiem…), stwarza pewne problemy, np. Co, jeśli zmieni się priorytet dyrektywy w sprawie podmiotu trzeciego?
JeetendraChauhan stwierdził (nie testowałem go jednak), że to rozwiązanie nie zadziała w wersji 1.13.
źródło
decorator()
jest uszkodzony (zaktualizowano do docs.angularjs.org/api/auto/service/$provide#decorator )bindToController
zostało wprowadzone w wersji 1.3. Należy jednak pamiętać, że nie należy tego traktować jako rozwiązania alternatywnego, dotyczy to tylko konkretnego przypadku, w którym pierwotna dyrektywa została ustalona wraz zbindToController
dobrem. Dobry pomysł, opublikuję to jako odpowiedź :)Chociaż nie jest to bezpośrednia odpowiedź na twoje pytanie, możesz chcieć wiedzieć, że najnowsza wersja (w wersji głównej) http://angular-ui.github.io/bootstrap/ dodała obsługę wyłączania kart. Ta funkcja została dodana przez: https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2
źródło
Inne rozwiązanie polegające na utworzeniu nowej dyrektywy, która rozszerza ją bez modyfikowania oryginalnej dyrektywy
Rozwiązanie jest podobne do rozwiązania dekoratora:
Utwórz nową dyrektywę i wstrzyknij jako zależność dyrektywę, którą chcesz rozszerzyć
W ten sposób możesz używać oryginalnej dyrektywy i rozszerzonej wersji w tej samej aplikacji
źródło
angular.merge
powinien zostać użyty, zaktualizuję przykładOto inne rozwiązanie dla innego scenariusza rozszerzania powiązań do dyrektywy, która ma tę
bindToController
właściwość.Uwaga: nie jest to alternatywa dla innych oferowanych tutaj rozwiązań. Rozwiązuje tylko konkretny przypadek (nieuwzględniony w innych odpowiedziach), w którym ustalono pierwotną dyrektywę
bindToController
.źródło