Llame a otra directiva de la directiva con los mismos atributos y contenido.

Question

Quiero anular el comportamiento de una directiva de biblioteca, llamada "ui-sref" .Veamos ejemplo:

<a ui-sref="edit" class="btn btn-small">
     <i class="icon-pencil"></i> Edit
 </a>

Ahora, quiero crear mi propia directiva llamada, por ejemplo, "ui-sref-adjunte" .El código será así:

<a ui-sref-appended="edit" class="btn btn-small">
     <i class="icon-pencil"></i> Edit
 </a>

La salida que quiero debe ser:

<a ui-sref="user.edit" class="btn btn-small">
     <i class="icon-pencil"></i> Edit
 </a>

(y luego cumplió, por lo que ui-sref podría hacer su trabajo)

¿Cómo puedo implementar esto?El problema es que quiero que mi A tenga los mismos atributos y contenido, pero cambió de ui-sref-awend="edit" a ui-sref="usuario.edit"

Answer 1

Establecer plantilla de su nueva directiva de la siguiente manera

 template : '<a ui-sref="user.edit" class="btn btn-small"> <i class="icon-pencil"</i> Edit</a>';

y configure el usuario.Edit en la función de enlace o pase al usuario a la Directiva a través del miembro del alcance.

Si tiene plantilla dinámica, puede crear la plantilla de directiva en la función de enlace.

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

editar

Si desea simplemente configurar la UI-SREF, simplemente agregue el UI-SREF como un atributo a su elemento y luego compile.

 app.directive('uiSrefAppended', function ($compile) {
        return { 
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.attr('ui-sref', 'user.edit');
                $compile(element)(scope);
            },
            scope: {
                user: '='
            }
        }
    });