Вопрос по dynamically-generated, angularjs-directive, angularjs – Как я могу динамически добавить директиву в AngularJS?

207

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

У меня простой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/

Ваш Ответ

7   ответов
5

если вы пытаетесь динамически добавить директиву, которая использует встроенный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);
            }
        }
    }
}]);
73

В дополнение к идеальному примеру 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

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

Не забудьте удалить исходную директиву, чтобы предотвратить ошибку «Превышен максимальный размер стека вызовов». SRachamim
Подобная проблема, с которой я сталкиваюсь, можете ли вы помочь мне здесьstackoverflow.com/questions/38821980/... pandu das
Maximum call stack size exceeded ошибка всегда происходит из-за бесконечной рекурсии. Я никогда не видел случая, чтобы увеличение размера стека решило бы это. Gunchars
Я бы хотел, чтобы в 2015 году у нас не было ограничений на размер стека вызовов. :( psycho brm
Привет, не могли бы вы представить идеи моего нового предложенного API, чтобы упростить процесс добавления директив программным способом?github.com/angular/angular.js/issues/6950 Спасибо! trusktr
9
function addAttr(scope, el, attrName, attrValue) {
  el.replaceWith($compile(el.clone().attr(attrName, attrValue))(scope));
}
45

Добавьте директиву 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)       

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

Да, это случай вставки директивы атрибута в другую директиву, а не вставки элемента в шаблон. Riceball LEE
Хотелось бы увидеть демонстрацию вставки нового атрибута в элемент, если возможно, в vanilla JS - я что-то упустил ... Patrick
Не помогает честно Вот так я и решил свою проблему:stackoverflow.com/a/20137542/1455709 Patrick
В чем причина того, что вы делаете это за пределами шаблона? Patrick
реальный пример вставки нового атрибута в элемент находится здесь (см. мой github):github.com/snowyu/angular-reactable/blob/master/src/... Riceball LEE
254

но сервис $ 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 );
      };
    }
  };
});

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

Разве компиляция не должна происходить на этапе предварительной ссылки? Я думаю, что контроллер должен содержать не-DOM, тестируемый модулем код, но я новичок в концепции связи / контроллера, поэтому я сам не уверен. Кроме того, одной базовой альтернативой является ng-include + частичный + ng-контроллер, так как он будет действовать как директива сунаследованный объем. Marcus Nielsen
Потрясающие. Оно работает. Видите, эти простые и базовые примеры - это те, которые должны быть показаны в документах на английском языке. Они начинают со сложных примеров. PCoelho
Джош - что проще сделать, не используя$compile? Спасибо за ваш ответ, кстати! doubleswirve
@doubleswirve В этом случае было бы намного проще просто использовать ngRepeat. :-) Но я предполагаю, что вы имеете в виду динамическое добавление новых директив на страницу, и в этом случае ответ будет отрицательным - не существует более простого способа, потому что$compile service - это то, что связывает проводники и подключает их к циклу событий. Там нет пути вокруг$compileВ такой ситуации, но в большинстве случаев другая директива, такая как ngRepeat, может выполнить ту же работу (поэтому ngRepeat выполняет компиляцию за нас). У вас есть конкретный вариант использования? Josh David Miller
Спасибо, Джош, это было действительно полезно. Я создал инструмент в Plnkr, который мы используем в новом CoderDojo, чтобы помочь детям научиться кодировать, и я просто расширил его, чтобы теперь я мог использовать директивы Angular Bootstrap, такие как datepicker, alert, tabs и т. Д. и сейчас он работает только в Chrome:embed.plnkr.co/WI16H7Rsa5adejXSmyNj/preview JoshGough
5

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

$compile Сервис компилирует фрагмент HTML ("< test text='n' >< / test >"), которая включает в себя директиву ("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

4

я придумал следующую директиву "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.

О, МОЙ БОГ. потребовалось 2 дня, чтобы найти этот $ compile ... спасибо друзья .. он работает лучше всего ... AJS, ты рок .... Srinivasan
Подобная проблема, с которой я сталкиваюсь, можете ли вы помочь мне здесьstackoverflow.com/questions/38821980/... pandu das

Похожие вопросы