Czy są problemy z zasięgiem, jeśli przenosiłem jeden element z jednego kontenera do drugiego?

Question

Biorąc pod uwagę, że masz taką sytuację:

<div class="site-frame"> 
    <div class="auxiliary"></div> 

    <div class="main" ui-view> 
     <div class="componentA"> 
     </div> 

     <div class="componentB" move-to=".auxiliary" breakpoints="1,2,3,4"> 
      <!-- CONTENTS OF componentB --> 
     </div> 

     <div class="componentC"> 
     </div> 
    </div> 
</div> 

Element .componentB ma dyrektywę o nazwie move-to który ma po prostu przenieść zawartość tego pierwiastka, zbierając je z jQuery dzieci selektora wieloznacznego (jak var contents = $('.componentB').find('> *');), gdy którykolwiek z te punkty przerwania zdefiniowane w dyrektywie breakpoints (te liczby są indeksami jednej tablicy, która przechowuje pomiary punktów przerwania) obecnie występują.

Kiedy niektóre przerwania tej dyrektywy jest aktywny, zmiana DOM do tego:

<div class="site-frame"> 
    <div class="auxiliary"> 
     <!-- CONTENTS OF componentB --> 
    </div> 

    <div class="main" ui-view> 
     <div class="componentA"> 
     </div> 

     <div class="componentB" move-to=".auxiliary" breakpoints="1,2,3,4"> 
     </div> 

     <div class="componentC"> 
     </div> 
    </div> 
</div> 

jest to czuły mechanizm jest używany w statycznej wersji jednej stronie, że mam do czynienia. Potrzebuję wiedzieć, czy są błędy związane z dziedziczeniem zakresu, transmisją zdarzeń, kontrolerem stanu, który jest powiązany z div.main, który sam jest rodzeństwem div.auxiliary.

Zastanawiając się, jak bardzo kątowe jest to zadanie, przypuszczam, że warstwa logiczna JS zachowuje relacje między odwołującym się elementem DOM w pewnym zakresie. Głównie na zakresach dyrektyw, używając funkcji link(), które z natury są z natury post-link(), więc manipulacja DOM jest bezpieczniejsza, ponieważ łącze zostało już utworzone.

Należy pamiętać, że przechowuję odniesienia do zawartości .componentB wewnątrz funkcji link(), podczas słuchania zdarzenia o zasięgu $destroy, aby wyczyścić zawartość, unikając wycieków pamięci. Również dlatego, że ten system nasłuchuje $window.on('resize'), aby dowiedzieć się, który jest bieżącym punktem przerwania, i podczas nawigacji możliwe jest, że zawartość mojego przykładu może zostać przeniesiona między ich oryginalnym kontenerem a tym pomocniczym.

Pytanie brzmi: jeśli przeniosę jeden element przez DOM, nawet poza tym rodzajem interfejsu ui-view, można bezpiecznie liczyć na zmienne aktualizacje powiązań danych, dziedziczenia i tak dalej?

pytam to przed wykonawcze ze względu na ogromny rozmiar aplikacji, i jak zawsze na przedgon produkcyjnych-mądry, nie było miejsca, aby omówić to przed ...

Edit 1:

Tymczasowo ten CodePen ma więcej szans: http://codepen.io/anon/pen/JXPvBE?editors=0010

Kod wykonuje to, czego potrzebuję, ale muszę przetestować go w ostatecznej aplikacji.

Answer 1

Podczas gdy pracowałem nad innymi zadaniami, rozwiązanie zamieszczone na stronie Edit 1 wskazało na dobry sposób rozwiązania tego problemu.

Podczas gdy pewne wątpliwości co do trwałości oryginalnego kontrolera, elementu nadrzędnego, były jakoś nieszczelne w tej sytuacji, co oznacza na przykład, że inne aktualizacje modeli miały możliwość nie wpływania na zmiany , do tej pory nie zauważono żadnych problemów.

Być może z innych sytuacjach może nie, ale na razie to działa dobrze:

http://codepen.io/anon/pen/JXPvBE?editors=0010

Na CodePen, na początku dyrektywy move-to, funkcja kompilacji, w pre-link faza, zachowuje odniesienie do elementu w przypadku, aby manipulować nim przy użyciu jego oryginalnej formy, przed procesem kątowym również jego dyrektywy (jak ng-repeat), więc nie będziemy mieli do czynienia z tymi kanciastymi komentarzami, które ograniczają miejsce jego dyrektyw:

<!-- ng-repeat: x in collection --> 
<li class="repeated-element"> 
    ... 
</li> 
<!-- end ng-repeat: x in collection --> 

To naprawdę dobry sposób na poradzenie sobie z niektórymi problemami, które nie pozostawiają miejsca na niektóre funkcje w SPA i trzeba umieścić je w pojemniku pomocniczym, który obejmuje całą stronę i prawidłowo umieszcza te elementy, które potrzebują więcej Uwaga, podobnie jak natywne aplikacje na telefony komórkowe, z panelami bocznymi. +