¿Cómo puedo agregar dinámicamente una directiva en AngularJS?

Tengo una versión muy resumida de lo que estoy haciendo que resuelve el problema.

Tengo un simple directive. Cada vez que hace clic en un elemento, agrega otro. Sin embargo, debe compilarse primero para representarlo correctamente.

Mi investigación me llevó a $compile. Pero todos los ejemplos usan una estructura complicada que realmente no sé cómo aplicar aquí.

Los violines están aquí: http://jsfiddle.net/paulocoelho/fBjbP/1/

Y el JS está aquí:

var module = angular.module('testApp', [])
    .directive('test', function () {
    return {
        restrict: 'E',
        template: '<p>{{text}}</p>',
        scope: {
            text: '@text'
        },
        link:function(scope,element){
            $( element ).click(function(){
                // TODO: This does not do what it's supposed to :(
                $(this).parent().append("<test text='n'></test>");
            });
        }
    };
});

Solución de Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/

Tiene una gran cantidad de jQuery inútil allí, pero el servicio de compilación $ es realmente super simple en este caso:

.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '<p ng-click="add()">{{text}}</p>',
    controller: function ( $scope, $element ) {
      $scope.add = function () {
        var el = $compile( "<test text='n'></test>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

Notarás que también modifiqué tu directiva para seguir algunas de las mejores prácticas. Avíseme si tiene preguntas sobre alguno de esos.

Además de perfeccionar el ejemplo de Riceball LEE de agregar una nueva directiva de elemento

newElement = $compile("<div my-directive='n'></div>")($scope)
$element.parent().append(newElement)

Se puede agregar una nueva directiva de atributo al elemento existente de esta manera:

Digamos que desea agregar sobre la marcha my-directiveal spanelemento.

template: '<div>Hello <span>World</span></div>'

link: ($scope, $element, $attrs) ->

  span = $element.find('span').clone()
  span.attr('my-directive', 'my-directive')
  span = $compile(span)($scope)
  $element.find('span').replaceWith span

Espero que ayude.

Agregar dinámicamente directivas en angularjs tiene dos estilos:

Agregar una directiva angularjs a otra directiva

• insertar un nuevo elemento (directiva)
• insertar un nuevo atributo (directiva) al elemento

insertar un nuevo elemento (directiva)

es sencillo. Y se puede usar en "enlace" o "compilar".

var newElement = $compile( "<div my-diretive='n'></div>" )( $scope );
$element.parent().append( newElement );

insertando un nuevo atributo al elemento

Es difícil y me da dolor de cabeza en dos días.

¡Usar "$ compile" generará un error recursivo crítico! Tal vez debería ignorar la directiva actual al volver a compilar el elemento.

$element.$set("myDirective", "expression");
var newElement = $compile( $element )( $scope ); // critical recursive error.
var newElement = angular.copy(element);          // the same error too.
$element.replaceWith( newElement );

Por lo tanto, tengo que encontrar una manera de llamar a la función directiva "enlace". Es muy difícil obtener los métodos útiles que están ocultos profundamente dentro de los cierres.

compile: (tElement, tAttrs, transclude) ->
   links = []
   myDirectiveLink = $injector.get('myDirective'+'Directive')[0] #this is the way
   links.push myDirectiveLink
   myAnotherDirectiveLink = ($scope, $element, attrs) ->
       #....
   links.push myAnotherDirectiveLink
   return (scope, elm, attrs, ctrl) ->
       for link in links
           link(scope, elm, attrs, ctrl)       

Ahora funciona bien.

function addAttr(scope, el, attrName, attrValue) {
  el.replaceWith($compile(el.clone().attr(attrName, attrValue))(scope));
}

La respuesta aceptada por Josh David Miller funciona muy bien si está tratando de agregar dinámicamente una directiva que utiliza una línea template. Sin embargo, si su directiva aprovecha templateUrlsu respuesta, no funcionará. Esto es lo que funcionó para mí:

.directive('helperModal', [, "$compile", "$timeout", function ($compile, $timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {}, 
        templateUrl: "app/views/modal.html",
        link: function (scope, element, attrs) {
            scope.modalTitle = attrs.modaltitle;
            scope.modalContentDirective = attrs.modalcontentdirective;
        },
        controller: function ($scope, $element, $attrs) {
            if ($attrs.modalcontentdirective != undefined && $attrs.modalcontentdirective != '') {
                var el = $compile($attrs.modalcontentdirective)($scope);
                $timeout(function () {
                    $scope.$digest();
                    $element.find('.modal-body').append(el);
                }, 0);
            }
        }
    }
}]);

Josh David Miller está en lo correcto.

PCoelho, en caso de que se pregunte qué $compilehace detrás de escena y cómo se genera la salida HTML de la directiva, eche un vistazo a continuación

El $compileservicio compila el fragmento de HTML ( "< test text='n' >< / test >") que incluye la directiva ("prueba" como elemento) y produce una función. Esta función se puede ejecutar con un alcance para obtener el "resultado HTML de una directiva".

var compileFunction = $compile("< test text='n' > < / test >");
var HtmlOutputFromDirective = compileFunction($scope);

Más detalles con ejemplos de código completo aquí: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs

Inspirado en muchas de las respuestas anteriores, se me ocurrió la siguiente directiva "stroman" que se reemplazará con cualquier otra directiva.

app.directive('stroman', function($compile) {
  return {
    link: function(scope, el, attrName) {
      var newElem = angular.element('<div></div>');
      // Copying all of the attributes
      for (let prop in attrName.$attr) {
        newElem.attr(prop, attrName[prop]);
      }
      el.replaceWith($compile(newElem)(scope)); // Replacing
    }
  };
});

Importante: Registre las directivas con las que desea usar restrict: 'C'. Me gusta esto:

app.directive('my-directive', function() {
  return {
    restrict: 'C',
    template: 'Hi there',
  };
});

Puedes usar así:

<stroman class="my-directive other-class" randomProperty="8"></stroman>

Para obtener esto:

<div class="my-directive other-class" randomProperty="8">Hi there</div>

Protip. Si no desea utilizar directivas basadas en clases, puede cambiar '<div></div>'a algo que le guste. Por ejemplo, tener un atributo fijo que contiene el nombre de la directiva deseada en lugar de class.