Angolare - Come posso rimuovere dal DOM un elemento su cui ho usato $ compilare?

Question

Quello che mi serve è la funzionalità di due ng-view. Perché non posso cambiare il innerHTML di qualcosa e compilarlo. Il problema che ho è quando cambio di nuovo il contenuto, posso compilare, ma angolare rimuove il binding da solo, o devo farlo manualmente, se sì, come?

EDIT: Spiegando

voglio fare una scelta obbligatoria, il cui contenuto posso cambiare e legarsi a diversi ambiti (da qui il $ di compilazione). Ma non voglio distruggere l'intero modale, solo alcuni dei suoi contenuti, e passare a un altro. Il mio principale dubbio è se rimuovendo un codice HTML compilato possa portare a perdite di memoria.

risolto

Per questo problema, ho creato un nuovo ambito del bambino (con $ nuovo) e distrutto ogni volta che ho cambiato il contenuto. Grazie per tutto

Answer 1

La soluzione per questo problema è la creazione di un nuovo ambito bambino. Tutti i binding con scope genitore funzionano a causa dell'ereditarietà dell'ambito. Quando ho bisogno di modificare il contenuto, semplicemente distruggo l'ambito figlio, evitando perdite di memoria.

ho anche fatto e metodi getter e setter per l'ambito bambino per evitare ambito padre poluting que, nel caso in cui l'atri contenuti variabili e getta

Answer 2

Per rimuovere manualmente l'elemento fare un element.remove(). Sembra che tu voglia anche distruggere la portata del tuo elemento compilato in modo da poterlo fare anche facendo scope.$destroy(); o $scope.$destroy(); a seconda che tu sia in una direttiva o meno.

http://docs.angularjs.org/api/ng.$rootScope.Scope#$destroy

Answer 3

Grazie per aver buona soluzione. Ho appena pubblicato qualche codice dell'attrezzo

.directive('modal', function($templateCache, $compile) { 
    return function(scope, element, attrs) { 
     var currentModalId = attrs.modalId; 
     var templateHtml = $templateCache.get(attrs.template); 
     var modalScope, modalElement; 

     scope.$on('modal:open', function(event, modalId) { 
      if(modalId == null || currentModalId === modalId) { 
       openModal(); 
      } 
     }); 

     scope.$on('modal:close', function(event, modalId) { 
      if(modalId == null || currentModalId === modalId) { 
       closeModal(); 
      } 
     }); 

     function openModal() { 
      // always use raw template to prevent ng-repeat directive change previous layout 
      modalElement = $(templateHtml); 

      // create new inherited scope every time open modal 
      modalScope = scope.$new(false); 

      // link template to new inherited scope of modal 
      $compile(modalElement)(modalScope); 

      modalElement.on('hidden.bs.modal', function() { 
       if(modalScope != null) { 
        // destroy scope of modal every time close modal 
        modalScope.$destroy(); 
       } 
       modalElement.remove(); 
      }); 

      modalElement.modal({ 
       show: true, 
       backdrop: 'static' 
      }); 
     } 

     function closeModal() { 
      if(modalElement != null) { 
       modalElement.modal('hide'); 
      } 
     } 
    }; 
});