Wie kann ich dynamisch hinzufügen einer Direktive in AngularJS?

Haben Sie eine Menge von sinnlos jQuery drin, aber die $compile-service ist eigentlich super einfach in diesem Fall:

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

Sie werden bemerken, ich überarbeitete Sie Ihre Richtlinie zu, um zu Folgen einige bewährte Methoden. Lassen Sie mich wissen, wenn Sie Fragen zu einer von denen.

Dynamisch hinzufügen von Richtlinien über angularjs verfügt über zwei Stile:

Fügen Sie eine angularjs-Direktive in eine andere Richtlinie

• einfügen eines neuen Elements(Richtlinie)
• einfügen eines neuen Attributs(Richtlinie) zu element

einfügen eines neuen Elements(Richtlinie)

ist es einfach. Und u können in der "link" oder "kompilieren".

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

einfügen eines neuen Attributs von element

Es ist schwer, und machen mir Kopfschmerzen innerhalb von zwei Tagen.

Per "$compile" erhöhen kritische rekursive Fehler!! Vielleicht sollte es ignorieren der geltenden Richtlinie bei der re-kompilieren-element.

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

So, ich habe einen Weg zu finden, rufen Sie die Richtlinie "link" - Funktion. Es ist sehr schwer zu bekommen, die nützliche Methoden, die versteckt tief im inneren Verschlüsse.

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)       

Nun, Es ist gut funktionieren.

Die akzeptierte Antwort von Josh David Miller funktioniert großartig, wenn Sie versuchen, um dynamisch hinzufügen einer Richtlinie für die Verwendung eines inline -template. Allerdings, wenn Ihre Richtlinie nutzt templateUrl seine Antwort wird nicht funktionieren. Hier ist was für mich gearbeitet:

.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);
            }
        }
    }
}]);

Inspiriert durch viele der bisherigen Antworten, die ich habe, kam mit der folgenden "stroman" Richtlinie ersetzen wird, sich mit anderen Richtlinien.

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

Wichtig: Registrieren Sie die Richtlinien, die Sie verwenden möchten, mit restrict: 'C'. Wie diese:

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

Können Sie verwenden, wie diese:

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

Um dies zu erhalten:

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

Protip. Wenn Sie nicht möchten, verwenden Sie die Richtlinien basieren auf Klassen, die Sie ändern können '<div></div>' zu etwas, was Sie mögen. E. g. haben ein festes Attribut enthält den Namen der gewünschten Richtlinie statt class.