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><h1>Hello</h1><p>some text</p><clock></clock></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>