Esistono problemi di ambito se si sposta un elemento da un contenitore a un altro?

Question

Considerando che avete questa situazione:

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

L'elemento .componentB ha una direttiva chiamata move-to che non è sufficiente spostare il contenuto di questo elemento, raccogliendoli con jQuery bambini selettore jolly (come var contents = $('.componentB').find('> *');), quando uno dei quei punti di interruzione, definiti sulla direttiva breakpoints (quei numeri sono gli indici di un array, che mantiene le misurazioni dei punti di interruzione) sono attualmente in corso.

Quando alcuni punto di interruzione di tale direttiva è attiva, la modifica DOM per questo:

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

Si tratta di un meccanismo sensibile viene utilizzato in una versione statica di un sito web che ho a che fare. Quello di cui ho bisogno è sapere se ci sono dei difetti con l'ereditarietà dell'ambito, la trasmissione degli eventi, il controller di stato, che è correlato allo div.main, che è a sua volta un fratello di div.auxiliary.

Chiedendosi come è angolare il suo lavoro, suppongo che il livello logico JS mantenga le relazioni tra l'elemento DOM a cui si fa riferimento su un determinato ambito. Principalmente sugli ambiti direttivi, utilizzando le funzioni link(), che sono post-link() per natura, quindi la manipolazione del DOM è più sicura, perché il collegamento è già stato creato.

Tenete presente che io continuo riferimenti dei .componentB contenuti all'interno della funzione link(), mentre si ascolta l'evento ambito $destroy, per chiarire le cose, evitando perdite di memoria. Anche perché questo sistema ascolta $window.on('resize') per scoprire quale è il punto di interruzione corrente e, durante la navigazione, è possibile che il contenuto del mio esempio possa essere spostato tra il loro contenitore originale e quello ausiliario.

Quindi, la domanda è: se sposto un elemento tramite DOM, anche al di fuori del suo genitore di vista ui, è sicuro continuare a contare su aggiornamenti variabili su associazioni di dati, ereditarietà e così via?

sto chiedendo questo prima di implementare a causa della enorme dimensione dell'applicazione, e come sempre su Runnings di produzione-saggio, non c'era spazio per discutere di questo prima ...

Edit 1:

Temporaneamente, questo CodePen ha più possibilità: http://codepen.io/anon/pen/JXPvBE?editors=0010

Il codice sta facendo ciò di cui ho bisogno, ma ho bisogno di testarlo all'interno dell'app finale.

Answer 1

Mentre sviluppavo altri compiti, la soluzione pubblicata su Modifica 1 della domanda indicava un buon modo per gestire questo problema.

Mentre alcuni dubbi sulla persistenza del controller originale, dell'elemento padre, erano in qualche modo una perdita in questa situazione, il che significa, ad esempio, che altri aggiornamenti sui modelli avevano la possibilità di non essere interessati dalle modifiche , fino ad ora, non sono stati notati problemi.

Forse con altre situazioni può fallire, ma per ora, sta funzionando bene:

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

Sul CodePen, sull'inizio della direttiva move-to, la funzione di compilazione, al pre-link fase, mantiene un riferimento all'elemento nel caso, per manipolarlo usando la sua forma originale, prima che il processo angolare sia anche le direttive (come ng-repeat), e quindi non ci occuperemo di quei commenti angolari che limitano il posto delle sue direttive:

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

È davvero un buon modo per gestire alcuni problemi di risposta, non è stato lasciato spazio per alcune funzionalità sulla SPA e è necessario posizionarli in un contenitore ausiliario, che copre l'intera pagina e posiziona correttamente quegli elementi che richiedono più attenzione, come le app native sui telefoni cellulari, con i pannelli laterali. +