Come posso aggiungere dinamicamente una direttiva in AngularJS?

Ho una versione molto ridotta di quello che sto facendo che risolve il problema.

Ho un semplice directive. Ogni volta che fai clic su un elemento, ne aggiunge un altro. Tuttavia, deve essere compilato prima per renderlo correttamente.

La mia ricerca mi ha portato a $compile. Ma tutti gli esempi usano una struttura complicata che non so davvero come applicare qui.

I violini sono qui: http://jsfiddle.net/paulocoelho/fBjbP/1/

E la JS è qui:

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>");
            });
        }
    };
});

Soluzione di Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/

Hai un sacco di inutili jQuery lì dentro, ma il servizio $ compile è in realtà super semplice in questo 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 );
      };
    }
  };
});

Noterai che ho modificato anche la tua direttiva per seguire alcune buone pratiche. Fammi sapere se hai domande su qualcuno di questi.

Oltre all'esempio perfetto di Riceball LEE sull'aggiunta di una nuova direttiva elemento

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

L'aggiunta di una nuova direttiva di attributo all'elemento esistente potrebbe essere eseguita in questo modo:

Supponiamo che desideri aggiungere al volo my-directivel' 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

Spero che aiuti.

L'aggiunta dinamica di direttive su angularjs ha due stili:

Aggiungi una direttiva angularjs in un'altra direttiva

• inserimento di un nuovo elemento (direttiva)
• inserendo un nuovo attributo (direttiva) nell'elemento

inserimento di un nuovo elemento (direttiva)

è semplice. E puoi usare in "link" o "compilare".

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

inserendo un nuovo attributo nell'elemento

È difficile e mi fa venire il mal di testa entro due giorni.

L'uso di "$ compile" genererà un errore ricorsivo critico !! Forse dovrebbe ignorare l'attuale direttiva quando si ricompila l'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 );

Quindi, devo trovare un modo per chiamare la funzione "link" della direttiva. È molto difficile ottenere i metodi utili che sono nascosti profondamente nelle chiusure.

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)       

Ora funziona bene.

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

La risposta accettata da Josh David Miller funziona benissimo se stai cercando di aggiungere dinamicamente una direttiva che utilizza un inline template. Tuttavia, se la tua direttiva sfrutta la templateUrlsua risposta non funzionerà. Ecco cosa ha funzionato per me:

.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 ha ragione.

PCoelho, nel caso ti stia chiedendo cosa $compilefa dietro le quinte e come sia generato l'output HTML dalla direttiva, dai un'occhiata qui sotto

Il $compileservizio compila il frammento di HTML ( "< test text='n' >< / test >") che include la direttiva ("test" come elemento) e produce una funzione. Questa funzione può quindi essere eseguita con un ambito per ottenere "l'output HTML da una direttiva".

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

Maggiori dettagli con esempi di codice completo qui: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs

Ispirato da molte delle risposte precedenti, ho escogitato la seguente direttiva "stroman" che si sostituirà a qualsiasi altra direttiva.

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: registra le direttive che desideri utilizzare restrict: 'C'. Come questo:

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

Puoi usare così:

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

Per ottenere questo:

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

Protip. Se non vuoi usare le direttive basate sulle classi, puoi cambiare '<div></div>'qualcosa in quello che ti piace. Ad esempio avere un attributo fisso che contiene il nome della direttiva desiderata anziché class.