Ottenere contenuti transclusa originale entro direttiva angolare

Question

Il mio obiettivo è quello di creare una direttiva editable che consente a un utente di modificare HTML di qualsiasi elemento a cui è collegato l'attributo (si veda Plunker: http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6)

Questo quasi lavori, ad eccezione Non riesco a ottenere l'originale HTML grezzo del contenuto escluso per inizializzare l'area di testo. Posso ottenere il testo di esso da clone.text(), ma che manca i tag HTML come <H1>, <div>, ecc in modo cliccando applicare senza modifiche non è idempotente.

Procedimento clone.html() genera un errore, Cannot read property 'childNodes' of undefined

app.directive("editable", function($rootScope) { 
    return { 
    restrict: "A", 
    templateUrl: "mytemplate.html", 
    transclude: true, 
    scope: { 
     content: "=editContent" 
    }, 

    controller: function($scope, $element, $compile, $transclude, $sce) { 

     // Initialize the text area with the original transcluded HTML... 
     $transclude(function(clone, scope) { 

     // This almost works but strips out tags like <h1>, <div>, etc. 
     // $scope.editContent = clone.text().trim(); 

     // this works much better per @Emmentaler, tho contains expanded HTML 
     var html = ""; 
     for (var i=0; i<clone.length; i++) { 
      html += clone[i].outerHTML||'';} 
     }); 
     $scope.editContent = html; 

     $scope.onEdit = function() { 
     // HACK? Using jQuery to place compiled content 
     $(".editable-output",$element).html(
      // compiling is necessary to render nested directives 
      $compile($scope.editContent)($rootScope) 
     ); 
     } 

     $scope.showEditor = false; 

     $scope.toggleEditor = function() { 
     $scope.showEditor = !$scope.showEditor; 
     }   
    } 
    } 
}); 

(Questa domanda è essenzialmente una riscrittura all'ingrosso della domanda e codice dopo un tentativo precedente per inquadrare la questione, Get original transcluded content in Angular directive)

Answer 1

Il $element.innerHTML dovrebbe contenere l'HTML originale Sto mostrando che contiene

<div class="editable"> 
    <span class="glyphicon glyphicon-edit" ng-click="toggleEditor()"></span> 

    <div class="editable-input" ng-show="showEditor"> 
     <b><p>Enter well-formed HTML content:</p></b> 
     <p>E.g.<code>&lt;h1&gt;Hello&lt;/h1&gt;&lt;p&gt;some text&lt;/p&gt;&lt;clock&gt;&lt;/clock&gt;</code></p> 
     <textarea ng-model="editContent"></textarea> 
     <button class="btn btn-primary" ng-click="onEdit()">apply</button> 
    </div> 

    <div class="editable-output" ng-transclude=""></div> 
    </div>