Добавить директиву из другой директивы в angularjs

Question

Добавление директивы из другой директивы, заставляет браузер зависать.

Что им пытаются сделать

1) Alter директиву пользовательского элемента (например, <h7></h7>) внутри функции компиляции. При этом браузер зависает.

код:

<h7>TEST</h7> 
    animateAppModule.directive('h7', function($compile){ 
     return { 
      restrict:"E", 
      compile:function(tElement, tAttrs, transclude){     
       tElement[0].setAttribute("ng-class", "{selected:istrue}"); 
       return function(scope, iElement, iAttrs){ 
        //$compile(iElement)(scope); 
       } 
      } 
     } 
    }) 

Если я раскомментировать эту строку //$compile(iElement)(scope);, браузер зависает. Вы можете раскомментировать приведенную выше строку в этой скрипке http://jsfiddle.net/NzgZz/3/, чтобы увидеть, как висит браузер.

Однако браузер не висит, если у меня есть свойство шаблона в директиве h7, как показано на этой скрипке. http://jsfiddle.net/KaGRt/1/.

В целом, что им пытаются достичь, это

Я хочу agument шаблон, с новыми функциональными возможностями с помощью директив Вашего индивидуальных. Что-то вроде декоратора. Я делаю это внутри функции компиляции директивы, которая находится в цепочке директивы, так что она затрагивает все экземпляры этого шаблона.

Псевдо пример того, чего я пытаюсь достичь.

<xmastree addBaloon addSanta></xmastree> 

1) Скажите xmastree есть шаблон - <div class="xmastree" ng-class={blinks:isBlinking}></div>

2) Say addBaloon есть шаблон <div class="ballon" ng-class={inflated:isinflated}></div> Затем addBaloon функция компиляции следует увеличить шаблон из step1 к чему-то вроде этого

<div class="xmastree" ng-class={blinks:isBlinking}> 
    <div ng-repeat = "ballon in ballons"> 
     <div class="ballon" ng-class={inflated:isinflated}></div> 
    </div> 
</div> 

3) Скажите addSanta имеет шаблон <div class="santa" ng-class={fat:isFat}></div> Затем addSanta функции компиляции следует увеличить шаблон из step2 к чему-то вроде этого

<div class="xmastree" ng-class={blinks:isBlinking}> 
    <div ng-repeat = "ballon in ballons"> 
     <div class="ballon" ng-class={inflated:isinflated}></div> 
    </div> 
    <div ng-repeat = "santa in santas"> 
     <div class="santa" ng-class={fat:isFat}></div> 
    </div> 
</div> 

После всех компиляции, если я запустить шаблон, полученный из шага 3 против сферы с подходящими свойствами, я должен быть в состоянии получить HTML.

Answer 1

Вызов $compile на элемент самой директивы заставит ту же директиву снова запускать, что затем повторяет этот процесс - навсегда. В угловом исходном коде многих директив вы можете видеть, что они обрабатывают эту ситуацию следующим образом: $compile(element.contents())(scope);, используя element.contents(), а не только element(). Это означает, что все внутри элемента скомпилировано и привязаны директивы/привязки данных и не создается цикл.

Если вам нужен $compile сам элемент, полностью заменить исходный элемент или удалить из него исходную директиву (удалить атрибут, изменить тип узла и т. Д.) Перед компиляцией.