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.