personalizadas directivas crear javascript angularjs transclusion

javascript - directivas - Obtenga contenido original transcluido dentro de la directiva angular



directivas angularjs (1)

Mi objetivo es crear una directiva editable que permita a un usuario editar HTML de cualquier elemento al que se adjunte el atributo (consulte Plunker: http://plnkr.co/edit/nIrr9Lu0PZN2PdnhQOC6 )

Esto casi funciona, excepto que no puedo obtener el HTML original en bruto del contenido transcluido para inicializar el área de texto. Puedo obtener el texto de él desde clone.text() , pero faltan las etiquetas HTML como <H1> , <div> , etc., por lo que hacer clic en aplicar sin editar no es idempotente.

El método clone.html() un error, 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; } } } });

(Esta pregunta es esencialmente una reescritura total de la pregunta y el código después de un intento anterior de encuadrar la pregunta, Obtener contenido original transcluido en la directiva Angular )


El $element.innerHTML debe contener el HTML original. Estoy mostrando que 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>