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

Что я пытаюсь сделать, это

1) Измените директиву пользовательского элемента (например,<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/.

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

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

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

<xmastree addBaloon addSanta></xmastree>

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

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

<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 Функция компиляции должна увеличивать шаблон с шага 2 до чего-то вроде этого

<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.