Кажется, существует довольно много способов связи между директивами. Скажем, у вас есть вложенные директивы, где внутренние директивы должны сообщать что-то внешнему (например, это было выбрано пользователем).
<outer>
<inner></inner>
<inner></inner>
</outer>
Пока у меня есть 5 способов сделать это
require:
родительская директива
inner
Директива может потребовать outer
директиву, которая может подвергнуть какой - либо метод на своем контроллере. Так что в inner
определении
require: '^outer',
link: function(scope, iElement, iAttrs, outerController) {
// This can be passed to ng-click in the template
$scope.chosen = function() {
outerController.chosen(something);
}
}
И в outer
контроллере директивы:
controller: function($scope) {
this.chosen = function(something) {
}
}
$emit
мероприятие
inner
Директива может $emit
событие, которого outer
директива может реагировать, через $on
. Итак, в inner
контроллере директивы:
controller: function($scope) {
$scope.chosen = function() {
$scope.$emit('inner::chosen', something);
}
}
и в outer
директивах контроллера:
controller: function($scope) {
$scope.$on('inner::chosen, function(e, data) {
}
}
Выполнить выражение в родительской области, через &
Элемент может привязаться к выражению в родительской области и выполнить его в соответствующую точку. HTML будет выглядеть так:
<outer>
<inner inner-choose="functionOnOuter(item)"></inner>
<inner inner-choose="functionOnOuter(item)"></inner>
</outer>
Таким образом, inner
контроллер имеет функцию «innerChoose», которую он может вызвать
scope: {
'innerChoose': '&'
},
controller: function() {
$scope.click = function() {
$scope.innerChoose({item:something});
}
}
который будет вызывать (в данном случае) функцию 'functionOnOuter' в области действия outer
директивы:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
Наследование области на неизолированной области
Учитывая, что это вложенные контроллеры, наследование области может работать, и внутренняя директива может просто вызывать любые функции в цепочке областей действия, если только она не имеет изолированной области видимости). Итак, в inner
директиве:
// scope: anything but a hash {}
controller: function() {
$scope.click = function() {
$scope.functionOnOuter(something);
}
}
И в outer
директиве:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
Службой впрыскивается как во внутренний, так и во внешний
Служба может быть введена в обе директивы, поэтому они могут иметь прямой доступ к одному и тому же объекту или вызывать функции для уведомления службы и, возможно, даже зарегистрировать себя для уведомления в пабе / подсистеме. Это не требует, чтобы директивы были вложенными.
Вопрос : Каковы потенциальные недостатки и преимущества каждого из них перед другими?
источник
Ответы:
Я предпочитаю определять
&
атрибут в области действия директивы прежде всего потому, что я рассматриваюscope: {}
определение директивы как ее API. Гораздо проще взглянуть на определение атрибута области видимости, чтобы увидеть, какую информацию требуется директиве для правильного функционирования, чем для поиска ссылок и функций контроллера для$emit
событий d, унаследованных функций области действия или функций, используемых внутри введенных контроллеров.источник
Мое мнение:
Службы являются предпочтительным способом обмена поведением / данными между модулями / директивами / контроллерами. Директивы - это изолированные вещи, которые могут быть вложенными или нет. Контроллеры должны как можно больше придерживаться модели представления, в идеале бизнес-логика не должна быть там.
Так:
Когда вы начнете связывать их вместе с помощью доступа к родительским функциям области действия, я думаю, что вы рискуете связать их слишком сложно и сделать все приложение нечитаемым, а компоненты - повторно. Когда вы разделяете эти общие данные или поведение в службе, вы получаете преимущество повторного использования целых директив с различными данными / поведением, даже определяя службу, которая будет использоваться во время выполнения. Вот что такое инъекция зависимостей.
источник