Añadiendo directivas desde dentro de otra directiva, hace que el navegador se cuelgue.

Lo que estoy tratando de hacer es

1) Alterar una directiva de elemento personalizado (como<h7></h7>) dentro de la función de compilación. Al hacer esto el navegador se bloquea.

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

Si descomento esta linea//$compile(iElement)(scope);, el navegador se cuelga. Puedes descomentar la línea anterior en este violín.http://jsfiddle.net/NzgZz/3/ para ver el navegador colgado.

Sin embargo, el bloqueo del navegador no está ocurriendo si tengo una propiedad de plantilla en elh7 Directiva, como se muestra en este violín.http://jsfiddle.net/KaGRt/1/.

En general, lo que estoy tratando de lograr es

Quiero unir la plantilla, con nuevas funcionalidades con ayuda de directivas induviduales. Algo como patrón decorador. Estoy haciendo esto dentro de la función de compilación de una directiva que está en la cadena de directivas para que afecte a todas las instancias de esa plantilla.

Pseudo ejemplo de lo que estoy tratando de lograr.

<xmastree addBaloon addSanta></xmastree>

1) Digamos que xmastree tiene una plantilla -<div class="xmastree" ng-class={blinks:isBlinking}></div>

2) deciraddBaloon tiene una plantilla<div class="ballon" ng-class={inflated:isinflated}></div> Entonces,addBaloon La función de compilación debería aumentar la plantilla del paso 1 a algo como esto

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

3) diaddSanta tiene una plantilla<div class="santa" ng-class={fat:isFat}></div> Entonces,addSanta La función de compilación debería aumentar la plantilla del paso 2 a algo como esto

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

Después de toda la compilación, si ejecuto la plantilla derivada de step3 en un ámbito con propiedades adecuadas, debería poder obtener el HTML.