Rozszerzanie Dyrektywy Kątowej

Chciałbym dokonać drobnej modyfikacji dyrektywy 3rd party (konkretnie Angular UI Bootstrap ). Chcę tylko dodać do zakresu dyrektywy pane: 

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ż być na bieżąco z Bowerem. Jak tylko uruchomię bower update, nadpiszę moje zmiany.

Więc jak mam rozszerzyć tę dyrektywę oddzielnie od tego komponentu bowera?

Author: Deduplicator, 2013-06-09
Source

5 answers

Prawdopodobnie najprostszym sposobem rozwiązania tego problemu jest utworzenie w aplikacji dyrektywy o tej samej nazwie co dyrektywa strony trzeciej. Obie dyrektywy zostaną uruchomione i można określić ich kolejność uruchamiania za pomocą właściwości priority (wyższy priorytet działa jako pierwszy).

Obie dyrektywy będą miały wspólny zakres, a Ty możesz uzyskać dostęp i zmodyfikować zakres dyrektywy strony trzeciej za pomocą metody link Twojej dyrektywy.

Opcja 2: można również uzyskać dostęp do zakresu dyrektywy stron trzecich, po prostu umieszczenie własnej arbitralnie nazwanej dyrektywy na tym samym elemencie z nią (zakładając, że żadna z dyrektyw nie używa zakresu izolowanego). wszystkie nieizolowane dyrektywy scope na elemencie będą współdzielone.

Czytaj dalej: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives

Uwaga: moja poprzednia odpowiedź dotyczyła modyfikacji Usługi strony trzeciej, a nie dyrektywy.

 95
Author: sh0ber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-05 08:55:11

TL; DR-gimme tha demo!


Duży Przycisk Demo

Użyj $provide's decorator() aby, cóż, udekorować dyrektywę osoby trzeciej.

W naszym przypadku możemy rozszerzyć zakres dyrektywy w następujący sposób: 

app.config(function($provide) {
    $provide.decorator('paneDirective', function($delegate) {
        var directive = $delegate[0];
        angular.extend(directive.scope, {
            disabled:'@'
        });
        return $delegate;
    });
});

Najpierw prosimy o udekorowanie dyrektywy pane poprzez podanie jej nazwy, połączonej z Directive jako pierwszym argumentem, a następnie pobieramy ją z parametru callback (który jest tablicą dyrektyw pasujące do tej nazwy).

Kiedy go otrzymamy, możemy uzyskać jego obiekt scope i rozszerzyć go w razie potrzeby. Zauważ, że wszystko to musi być zrobione w bloku config.

Niektóre notatki

  • Zasugerowano, aby po prostu dodać dyrektywę o tej samej nazwie, a następnie ustawić jej poziom priorytetu. Poza tym, że jest to niemantyczne (co jest nawet słowem , wiem...), stwarza problemy, np. zmiany?

  • JeetendraChauhan stwierdził (nie testowałem go jednak), że to rozwiązanie nie będzie działać w wersji 1.13.

 59
Author: Eliran Malka,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-22 13:09:04

Chociaż nie jest to bezpośrednia odpowiedź na twoje pytanie, możesz chcieć wiedzieć, że najnowsza wersja (w master) http://angular-ui.github.io/bootstrap / dodano obsługę wyłączania kart. Ta funkcja została dodana przez: https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2

 8
Author: pkozlowski.opensource,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-09 10:24:53

Inne rozwiązanie, w którym tworzysz nową dyrektywę, która rozszerza ją bez modyfikowania pierwotnej dyrektywy

Rozwiązanie jest podobne do rozwiązania dekoratora:

Utwórz nową dyrektywę i zastąp jako zależność dyrektywę, którą chcesz rozszerzyć 

app.directive('extendedPane', function (paneDirective) {

  // to inject a directive as a service append "Directive" to the directive name
  // you will receive an array of directive configurations that match this 
  // directive (usually only one) ordered by priority

  var configExtension = {
     scope: {
       disabled: '@'
     }
  }

  return angular.merge({}, paneDirective[0], configExtension)
});

W ten sposób możesz użyć oryginalnej dyrektywy i rozszerzonej wersji w tej samej aplikacji

 5
Author: kidroca,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-28 07:51:27

Oto inne rozwiązanie dla innego scenariusza rozszerzenia wiązań do dyrektywy, która ma właściwość bindToController.

Uwaga: nie jest to alternatywa dla innych rozwiązań, które były tutaj oferowane. Rozwiązuje tylko konkretny przypadek (nieuwzględniony w innych odpowiedziach), w którym pierwotna dyrektywa została skonfigurowana z bindToController.

 1
Author: gilad mayani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-12 06:57:05