Dodaj dyrektywę z innej dyrektywy w angularjs

Dodanie dyrektywy z innej dyrektywy powoduje zawieszenie przeglądarki.

Co próbuję zrobić to

1) Zmień dyrektywę elementu niestandardowego (np<h7></h7>) wewnątrz funkcji kompilacji. W ten sposób przeglądarka zawiesza się.

kod:

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

Jeśli odkomentuję tę linię//$compile(iElement)(scope);, przeglądarka zawiesza się. Możesz odkomentować powyższą linię w tym skrzydlehttp://jsfiddle.net/NzgZz/3/ aby zobaczyć wiszącą przeglądarkę.

Jednak zawieszenie przeglądarki nie dzieje się, jeśli mam właściwość szablonu wh7 dyrektywy, jak pokazano na tym skrzydle.http://jsfiddle.net/KaGRt/1/.

W sumie to, co próbuję osiągnąć, jest

Chcę przygotować szablon z nowymi funkcjami za pomocą indywidualnych dyrektyw. Coś jak wzór dekoratora. Robię to wewnątrz funkcji kompilacji dyrektywy, która znajduje się w łańcuchu dyrektywy, tak aby wpływała na wszystkie instancje tego szablonu.

Pseudo przykład tego, co próbuję osiągnąć.

<xmastree addBaloon addSanta></xmastree>

1) Powiedz xmastree ma szablon -<div class="xmastree" ng-class={blinks:isBlinking}></div>

2) PowiedzaddBaloon ma szablon<div class="ballon" ng-class={inflated:isinflated}></div> Następnie,addBaloon funkcja kompilacji powinna rozszerzyć szablon z kroku 1 na coś takiego

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

3) PowiedzaddSanta ma szablon<div class="santa" ng-class={fat:isFat}></div> Następnie,addSanta funkcja kompilacji powinna rozszerzyć szablon z kroku 2 na coś podobnego

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

Po całej kompilacji, jeśli uruchomię szablon pochodzący z kroku 3 w odniesieniu do zakresu z odpowiednimi właściwościami, powinienem być w stanie uzyskać HTML.

questionAnswers(1)

yourAnswerToTheQuestion