Adicionando diretiva de dentro de outra diretiva, faz o navegador travar.

O que estou tentando fazer é

1) Alterar uma diretiva de elemento personalizado (como<h7></h7>) dentro da função de compilação. Ao fazer isso, o navegador trava.

código:

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

Se eu descomentar esta linha//$compile(iElement)(scope);, o navegador trava. Você pode descomentar a linha acima mencionada neste violinohttp://jsfiddle.net/NzgZz/3/ para ver o navegador pendurado.

No entanto, o enforcamento do navegador não está acontecendo se eu tiver a propriedade template noh7 diretiva, como mostrado neste violino.http://jsfiddle.net/KaGRt/1/.

Em geral, o que estou tentando alcançar é

Quero agendar o template, com novas funcionalidades com ajuda de diretivas induvidas. Algo como padrão de decorador. Eu estou fazendo isso dentro da função de compilação de uma diretiva que está na cadeia de diretivas para que ela afete todas as instâncias desse modelo.

Pseudo exemplo do que estou tentando alcançar.

<xmastree addBaloon addSanta></xmastree>

1) Diga que o xmastree tem um modelo -<div class="xmastree" ng-class={blinks:isBlinking}></div>

2) DigaaddBaloon tem um modelo<div class="ballon" ng-class={inflated:isinflated}></div> Então,addBaloon função de compilação deve aumentar o modelo da etapa 1 para algo como isto

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

3) DigaaddSanta tem um modelo<div class="santa" ng-class={fat:isFat}></div> Então,addSanta função de compilação deve aumentar o modelo da etapa 2 para algo como isto

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

Depois de toda a compilação, se eu executar o modelo derivado de step3 contra um escopo com propriedades adequadas, eu deveria ser capaz de obter o HTML.