Get original transkludierte Inhalt innerhalb Winkel Richtlinie

Question

Mein Ziel ist es, eine editable Richtlinie zu erstellen, die ein Benutzer HTML eines Elements das Attribut auf das bearbeiten können ist beigefügt (siehe Plunker: http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6)

Diese fast Werke außer Ich kann nicht das ursprüngliche unverarbeitete HTML des übersetzten Inhalts erhalten, um den Textbereich zu initialisieren. Ich kann den Text aus clone.text() bekommen, aber das fehlt die HTML-Tags wie <H1>, <div> usw. so ohne Änderungen klicken gelten nicht idempotent.

Verfahren clone.html() einen Fehler führen, 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; 
     }   
    } 
    } 
}); 

(Diese Frage ist im Wesentlichen ein Großschreibungs der Frage und Code nach einem frühen Versuch, die Frage zu Rahmen, Get original transcluded content in Angular directive)

Answer 1

Die $element.innerHTML sollten enthält das ursprüngliche HTML. Ich zeige, dass es enthält

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