Вызовите другую директиву из директивы с теми же атрибутами и содержимым
-
21-12-2019 - |
Вопрос
Я хочу переопределить поведение одной библиотечной директивы, называемой "пользовательский интерфейс-sref".Давайте посмотрим на пример:
<a ui-sref="edit" class="btn btn-small">
<i class="icon-pencil"></i> Edit
</a>
Теперь я хочу создать свою собственную директиву, которая называется, например, "пользовательский интерфейс-sref-добавлен".Код будет выглядеть следующим образом:
<a ui-sref-appended="edit" class="btn btn-small">
<i class="icon-pencil"></i> Edit
</a>
Результат, который я хочу, должен быть:
<a ui-sref="user.edit" class="btn btn-small">
<i class="icon-pencil"></i> Edit
</a>
(а затем подчинился, так что пользовательский интерфейс-sref мог бы выполнить свою работу)
Как я могу это реализовать?Проблема в том, что я хочу, чтобы мой a иметь те же атрибуты и содержимое, но измененные по сравнению с пользовательский интерфейс-sref-добавлено="редактировать" Для пользовательский интерфейс-sref="user.edit"
Решение
Установите шаблон вашей новой директивы следующим образом
template : '<a ui-sref="user.edit" class="btn btn-small"> <i class="icon-pencil"</i> Edit</a>';
И установите user.edit в функции link или передайте директиву user to через элемент области видимости.
Если у вас есть динамический шаблон, вы можете создать шаблон директивы в функции link.
app.directive('newDirective', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var template= '<a ui-sref="user.edit" class="{{btnClass}}"> <i class="icon-pencil"</i> Edit </a>';
element.append($compile(template)(scope));
},
scope: {
user: '=',
btnClass: '@'
}
}
});
Редактировать
Если вы хотите просто установить ui-sref, просто добавьте ui-sref в качестве атрибута к вашему элементу, а затем скомпилируйте его.
app.directive('uiSrefAppended', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.attr('ui-sref', 'user.edit');
$compile(element)(scope);
},
scope: {
user: '='
}
}
});