Как я могу динамически добавить директиву в AngularJS?

У меня есть очень упрощенная версия того, что я делаю, и эта проблема решается.

У меня все просто directive. Каждый раз, когда вы нажимаете на элемент, он добавляет еще один. Тем не менее, он должен быть скомпилирован в первую очередь, чтобы правильно отобразить.

Мои исследования привели меня к $compile. Но во всех примерах используется сложная структура, которую я не знаю, как применить здесь.

Скрипки здесь: http://jsfiddle.net/paulocoelho/fBjbP/1/

И JS здесь:

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

Решение Джоша Дэвида Миллера: http://jsfiddle.net/paulocoelho/fBjbP/2/

У вас там много бессмысленного jQuery, но сервис $ compile на самом деле очень прост в этом случае:

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

Вы заметите, что я также изменил вашу директиву, чтобы следовать рекомендациям. Дайте мне знать, если у вас есть вопросы по любому из них.

В дополнение к прекрасному примеру Riceball LEE по добавлению новой директивы элемента

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

Добавление новой директивы атрибута к существующему элементу может быть сделано следующим образом:

Допустим, вы хотите добавить на лету my-directiveк spanэлементу.

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

Надеюсь, это поможет.

Динамическое добавление директив на angularjs имеет два стиля:

Добавьте директиву angularjs в другую директиву

• вставка нового элемента (директива)
• вставка нового атрибута (директивы) в элемент

вставка нового элемента (директива)

это просто. И вы можете использовать в «ссылку» или «компилировать».

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

вставка нового атрибута в элемент

Это тяжело, и у меня болит голова в течение двух дней.

Использование «$ compile» вызовет критическую рекурсивную ошибку !! Возможно, он должен игнорировать текущую директиву при повторной компиляции элемента.

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

Итак, я должен найти способ вызвать директиву «link». Очень трудно найти полезные методы, которые скрыты глубоко внутри замыканий.

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)       

Теперь это хорошо работает.

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

Принятый ответ Джоша Дэвида Миллера прекрасно работает, если вы пытаетесь динамически добавить директиву, использующую встроенный метод template. Однако, если ваша директива использует templateUrlего ответ, ничего не получится. Вот что сработало для меня:

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

Джош Дэвид Миллер прав.

PCoelho, в случае, если вам интересно, что $compileпроисходит за кулисами и как вывод HTML генерируется из директивы, пожалуйста, посмотрите ниже

$compileСлужбы компилирует фрагмент HTML ( "< test text='n' >< / test >") , который включает в директиве ( «тест» в качестве элемента) и производит функцию. Затем эту функцию можно выполнить с областью действия, чтобы получить «вывод HTML из директивы».

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

Более подробная информация с примерами полного кода здесь: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamically-add-directives-in-angularjs

Вдохновленный многими предыдущими ответами, я придумал следующую директиву «stroman», которая заменит себя другими директивами.

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

Важно: Зарегистрируйте директивы, которые вы хотите использовать restrict: 'C'. Как это:

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

Вы можете использовать как это:

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

Чтобы получить это:

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

Protip. Если вы не хотите использовать директивы, основанные на классах, вы можете изменить '<div></div>'то, что вам нравится. Например, есть фиксированный атрибут, который содержит имя желаемой директивы вместо class.