AngularJS - Динамическое создание элементов, определяющих директивы

У меня есть такая настройка:

  • Контроллер c передает событие e
  • Директива d прослушивает e, а на e записывает в DOM через append и тем самым создает новые элементы, определяющие директиву d2.

IE: element.append('<directiveTwo ...>')

  • Директива two никогда не вызывается Angular
  • Когда я проверяю DOM (и debug), я вижу, что Controller c и директива d выполняют свои задания, и у меня есть новые элементы directiveTwo.

Что не хватает? Что нужно сделать, чтобы вызвать вызов директивы 2 после динамического создания этих элементов?

Ответы

Ответ 1

См. $compile. Вы можете использовать эту услугу аналогично этому:

var newDirective = angular.element('<div d2></div>');
element.append(newDirective);
$compile(newDirective)($scope);

Это выполнит компиляцию и привязку вашего нового элемента и установите d2 в действие.

Однако вы можете найти более простым и более angular, если вы можете как-то переписать свою оригинальную директиву с точки зрения других встроенных директив, таких как ng-repeat или ng-include, которые будут выполнять компиляцию и ссылку для вас.

Если ваша директива достаточно проста, она может просто что-то сделать в дополнение к массиву при прослушивании вашего события и указать шаблон, например

<div ng-repeat="evt in recordedEvents">
    <div d2="evt"></div>
</div>