Як я можу динамічно додати директиву в 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, але служба компіляції $ в цьому випадку насправді дуже проста :

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

Ви помітите, що я переробив вашу директиву теж, щоб дотримуватися деяких найкращих практик. Повідомте мене, якщо у вас є запитання щодо будь-якого з них.

На додаток до ідеального прикладу LEE 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

Натхненний багатьма попередніми відповідями, я придумав наступну "строманську" директиву, яка замінить себе будь-якими іншими директивами.

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>

Пропіт. Якщо ви не хочете використовувати директиви на основі класів, ви можете змінити '<div></div>'щось, що вам подобається. Наприклад, є фіксований атрибут, який містить ім'я потрібної директиви замість class.