Interrompe genuinamente un elemento dal ribind – dissipare un elemento – AngularJS

Sto cercando di scoprire come posso fermare un elemento DOM dai dati di associazione dall’ambito in angular.

So che potresti farlo con le istruzioni if ​​e tutte, ma esiste un modo genuino e permanente per interrompere l’associazione di un elemento in angular ma mantenere il contenuto che è stato aggiunto?

Quindi dì che ho questo

​Welcome​

E cambio il modello in modo che il div cambi a questo.

 
​Welcome​ World

Quindi faccio clic sul pulsante che lo separerà, quindi se cambio il modello in 'Welcome Universe' , non voglio che

sia lo stesso di prima. Questo

 
​Welcome​ World

So che ci sono molti altri modi per farlo, ma non conosco alcun modo per svincolare genuinamente l’elemento, senza clonarlo e rimpiazzando quello vecchio scorrendo gli attributi e il testo …

Demo thing: http://jsfiddle.net/a9tZY/

In questo modo, non dovrebbe influenzare il modello o altri elementi che sono vincolanti per quel modello.

Per farla breve, Tell Angular lascia l’elemento da solo per sempre.

AGGIORNARE

Il modo per farlo è creare un nuovo ambito sull’elemento con una direttiva come questa.

 yourModule.directive('unbindable', function(){ return { scope: true }; }); 

E applicalo al tuo elemento in questo modo

 

Quindi per dissipare questo elemento da qualsiasi aggiornamento lo fai.

 angular.element( document.getElementById('yourId') ).scope().$destroy(); 

Fatto, ecco una demo.

Demo: http://jsfiddle.net/KQD6H/

Quindi questo crea un nuovo ambito sull’elemento e funziona solo perché tutti gli ambiti ereditano tutti i dati dai rispettivi ambiti padre. quindi l’ambito è fondamentalmente uguale all’ambito principale, ma consente di distruggere l’ambito senza influire sull’ambito principale. Poiché a questo elemento è stato assegnato il proprio ambito, quando lo distruggete non ottiene lo scope genitore indietro come tutti gli altri elementi, se ciò ha senso 0.o

Tutto sotto questa linea è stata la mia risposta originale, lascerò qui in caso qualcuno preferisca in questo modo


Sono riuscito a realizzarlo sinceramente con una direttiva unbindable . Quando hai impostato la direttiva unbinable sull’elemento, tutto ciò che è necessario per dissipare l’elemento è questo.

 yourElement.attr('unbind', 'true'); // Ref 1 $scope.$broadcast('unbind'); // Ref 2 

Ecco la direttiva.

 app.directive('unbindable', function(){ return { scope: true, // This is what lets us do the magic. controller: function( $scope, $element){ $scope.$on('unbind', function(){ // Ref 3 if($element.attr('unbind') === 'true'){ // Ref 4 window.setTimeout(function(){ $scope.$destroy() }, 0);//Ref 5 } }); } } }); 

e tu metti il ​​tuo elemento in questo modo.

 

Quindi, ogni volta che si aggiunge l’attributo unbind="true" a h1 e si pubblica unbind l’elemento sarà non associato

REF-1: aggiungi l’attributo unbind true all’elemento in modo che la direttiva sappia quale elemento stai slegando.

REF-2: trasmette l’evento unbind attraverso gli scope in modo che la direttiva sappia che vuoi separare un elemento – Assicurati di aggiungere prima l’attributo. — A seconda del layout dell’app, potrebbe essere necessario utilizzare $rootScope.$broadcast

REF-3 : quando viene trasmesso l’evento unbind

REF-4 : se l’elemento associato alla direttiva ha un attributo unbind true

REF-5 : Quindi distruggi l’ambito effettuato dalla direttiva. Dobbiamo usare setTimeout perché penso che l’angular prova a fare qualcosa dopo l’evento $on e otteniamo un errore, quindi l’uso di setTimeout preverrà setTimeout . Anche se spara all’istante.

Funziona su più elementi, ecco una bella demo.

Demo: http://jsfiddle.net/wzAXu/2/

Questo mi ha incuriosito, quindi ho fatto un po ‘di curiosità. All’inizio ho provato il metodo “unbind ()” suggerito nell’altra risposta, ma che ha funzionato solo rimuovendo i gestori di eventi dall’elemento quando quello che stai cercando di fare è rimuovere l’ambito angular dall’elemento. Ci potrebbe essere qualche funzione nascosta più ordinata in Angular per farlo, ma funziona anche bene:

 angular.element(document.getElementById('txtElem')).scope().$destroy(); 

Ciò mantiene il modello (e aggiorna qualcos’altro ancora associato ad esso), ma rimuove l’associazione dall’elemento. Inoltre, nell’esempio sopra riportato, non vi è alcun legame da rimuovere perché non si sta vincolando a nessun elemento, ma si sta semplicemente visualizzando l’espressione del modello in linea. Il mio esempio mostra questo in azione: http://jsfiddle.net/3jQMx/1/

È ansible chiamare il metodo unbind che interrompe l’ascolto dell’elemento in cui è presente l’attributo ng-model. Vedi fiddle: http://jsfiddle.net/jexgF/

 angular.element(document.getElementById('txtElem')).unbind() 

unbind rimuove tutti gli ascoltatori di eventi, quindi ogni volta che vengono apportate modifiche, non li ascolta e quindi non passa attraverso il loop angular. Ho anche dato per scontato che non stai usando jQuery, ma se lo sei, puoi usare un selettore migliore di document.getElementById