Вызовите другую директиву из директивы с теми же атрибутами и содержимым

Question

Я хочу переопределить поведение одной библиотечной директивы, называемой "пользовательский интерфейс-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"

Answer 1

Установите шаблон вашей новой директивы следующим образом

 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: '='
            }
        }
    });