Я хотел бы внести незначительные изменения в стороннюю директиву (в частности, в Angular UI Bootstrap ). Я просто хочу добавить в область действия 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
};
}]);
Но я также хочу поддерживать Angular-Bootstrap в актуальном состоянии с Bower. Как только бегу bower update
, перезапишу свои изменения.
Итак, как мне расширить эту директиву отдельно от этого компонента bower?
$provide.decorator()
, см. Мой ответ ниже.Ответы:
Вероятно, самый простой способ решить эту проблему - создать в вашем приложении директиву с тем же именем, что и сторонняя директива. Обе директивы будут запущены, и вы можете указать их порядок выполнения с помощью
priority
свойства (сначала выполняется более высокий приоритет).Две директивы будут иметь общую область видимости, и вы можете получить доступ и изменить область действия сторонней директивы с помощью
link
метода вашей директивы .Вариант 2: вы также можете получить доступ к области действия сторонней директивы, просто поместив свою собственную директиву с произвольным именем в один и тот же элемент (при условии, что ни одна из директив не использует изолированную область). Все директивы неизолированной области видимости для элемента будут иметь общую область видимости.
Дополнительная литература: https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives
Примечание. Мой предыдущий ответ касался изменения сторонней службы, а не директивы.
источник
$compile
документ здесьTL; DR - дай мне демо!
Big Demo Button
Используйте
$provide
's,decorator()
чтобы украсить директиву третьей стороны.В нашем случае мы можем расширить область действия директивы следующим образом:
Сначала мы просим украсить
pane
директиву, передав ее имя, объединенное сDirective
первым аргументом, затем мы извлекаем его из параметра обратного вызова (который представляет собой массив директив, соответствующих этому имени).Как только мы его получим, мы сможем получить его объект области видимости и при необходимости расширить его. Обратите внимание, что все это нужно делать в
config
блоке.Некоторые примечания
Было предложено просто добавить директиву с тем же именем, а затем установить ее уровень приоритета. Помимо несемантичности (это даже не слово , я знаю…), он создает проблемы, например, что, если уровень приоритета сторонней директивы изменится?
ДжитендраЧаухан заявил (хотя я его не тестировал), что это решение не будет работать в версии 1.13.
источник
decorator()
работает (обновлено до docs.angularjs.org/api/auto/service/$provide#decorator )bindToController
был представлен в версии 1.3. Но обратите внимание, что это не следует рассматривать как альтернативное решение, это только для конкретного случая, когда исходная директива была настроена соbindToController
свойством. Хорошая идея, яХотя это не прямой ответ на ваш вопрос, вы, возможно, захотите узнать, что последняя версия (в главной) http://angular-ui.github.io/bootstrap/ добавила поддержку для отключения вкладок. Эта функция была добавлена через: https://github.com/angular-ui/bootstrap/commit/2b78dd16abd7e09846fa484331b5c35ece6619a2
источник
Другое решение, в котором вы создаете новую директиву, которая расширяет ее без изменения исходной директивы.
Решение аналогично решению декоратора:
Создайте новую директиву и введите в качестве зависимости директиву, которую вы хотите расширить.
Таким образом, вы можете использовать исходную директиву и расширенную версию в одном приложении.
источник
angular.merge
надо было использовать,Вот еще одно решение для другого сценария расширения привязок к директиве, у которой есть
bindToController
свойство.Примечание: это не альтернатива другим решениям, которые были здесь предложены. Он решает только конкретный случай (не описанный в других ответах), когда исходная директива была настроена с помощью
bindToController
.источник